0:00/0:00

Appearance

Recorded on iPhone. The TesseraUI logo cast in chrome, with reflections sliding along its curves.

Shader

Liquid Metal Shape

Any SVG, from a logo to an icon, cast in moving liquid metal with a rolled edge and a soft shadow.

$12

Or get it with Pro

Features

Drop in your logo and it turns to liquid chrome
The reflections wrap around your shape's curves instead of just sliding across it
Use an SVG file, a snippet of SVG, or just a path
Outline icons work as well as solid ones
Start from chrome, gunmetal, ember or stripes, then tweak from there
Just as good on a dark screen as a light one

Built with

Skia runtime shader
Reanimated
react-native-svg

Installation

1Install dependencies

npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets react-native-svg

2Run a development build (Expo Go can't load Skia)

npx expo run:ios   # or: npx expo run:android

Usage

Paste your logo's SVG markup and give it a size.

import { LiquidMetalShape } from '@/components/liquid-metal-shape';

const logo = `<svg viewBox="0 0 24 24"><path d="M12 2L22 22H2Z" /></svg>`;

export function Hero() {
  return <LiquidMetalShape svg={logo} style={{ width: 240, height: 240 }} />;
}

Prefer import Logo from './logo.svg'? That works too once your app has react-native-svg-transformer set up.

How it works

The SVG is turned into a single Skia path, then into a depth map once per size: zero on the outline and rising towards the middle. A Skia shader reads that map to bend bands of reflection around the shape, so the metal follows its contours, and shades a rolled edge along the outline. Each frame only moves the clock forward. The shader is ported from Paper Design's liquid metal shader.

More once you own it

Examples, the full list of props and every advanced option for Liquid Metal Shape are here for owners.

Next componentParticle Morph