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.

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

Or get it with Pro

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 2 L22 22 L2 22 Z" /></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.

Examples

Presets

Pick a look, then override any single value.

<LiquidMetalShape
  svg={logo}
  preset="noir"
  style={{ width: 200, height: 200 }}
/>

<LiquidMetalShape
  svg={logo}
  preset="noir"
  config={{ angle: 45 }}
  style={{ width: 200, height: 200 }}
/>

From path data

No SVG file needed: pass a path, and give it a stroke width to outline it instead of filling it.

<LiquidMetalShape
  path="M12 2 L22 22 L2 22 Z"
  style={{ width: 120, height: 120 }}
/>

<LiquidMetalShape
  path={heartPath}
  strokeWidth={2}
  style={{ width: 120, height: 120 }}
/>

Flat and still

No rolled edge, no shadow, and no movement.

<LiquidMetalShape
  svg={logo}
  bevel={0}
  shadow={false}
  paused
  style={{ width: 200, height: 200 }}
/>

Props

Prop	Type	Default	Description
`svg`	`SvgSource`	—	An imported `.svg` file or SVG markup. Every drawn element becomes part of the shape.
`path`	`string`	—	SVG path data, used when `svg` is not set.
`preset`	`"default" \| "noir" \| "ember" \| "stripes"`	`"default"`	The look of the metal: bright chrome, soft blue gunmetal, chrome with a hot orange glow, or dense colourful stripes.
`speed`	`number`	`1`	Animation speed. 0 holds still.
`config`	`Partial<LiquidMetalConfig>`	—	Fine tuning. See Advanced.
`style`	`StyleProp<ViewStyle>`	—	Give it a width and a height; the shape is scaled to fit and centred.
`accessibilityLabel`	`string`	—	Read by screen readers, for example "Acme logo".

Advanced

Everything most apps never need to touch.

Every field is optional and overrides the preset.

Field	Default	Description
`tint`	`"#ffffff"`	Colour burned into the metal. White is none; alpha sets the strength.
`softness`	`0.1`	Softness of the reflection edges, 0–1.
`repetition`	`2`	Reflection bands across the surface, 1–10.
`shiftRed`	`0.3`	Warm colour fringe on the reflections, -1–1.
`shiftBlue`	`0.3`	Cool colour fringe on the reflections, -1–1.
`distortion`	`0.07`	Noise that bends the reflections, 0–1.
`contour`	`0.75`	How closely the reflections follow the outline, 0–1.
`angle`	`70`	Direction the reflections travel, in degrees.
`highlightColor`	`"#fafaff"`	Brightest colour of the metal.
`shadowColor`	`"#1a1a1a"`	Darkest colour of the metal.

Prop	Default	Description
`strokeWidth`	—	Outlines `path` with this width, in path units, instead of filling it.
`bevel`	`0.5`	Depth of the rolled metal edge, 0–1. 0 is a flat cut.
`shadow`	`true`	Draws a soft drop shadow under the shape.
`paused`	`false`	Holds the metal still.

Works on iOS and Android from the same code, and looks the same on both. It doesn't run on web.
The shape keeps its proportions inside the box you give it.
The drop shadow reaches past that box, so leave a little room below it.
Outline-only SVG elements are drawn as outlines, so line icons work.
Definitions, clip paths and masks inside the SVG are ignored.

Screen readers announce it as an image, with its accessibilityLabel.
With Reduce Motion on, the metal holds still.

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.

Next componentParticle Morph