Sheen

Liquid metal surface with a pointer-driven specular.

A flowing metal field with soft lighting. Move over it and the highlight follows. The metal tint is fixed so the specular stays the point.

1
1
28
1
0.95
tsx
import { Sheen } from "@/components/motion/sheen"export function Example() {  return (    <Sheen      className="h-[420px] w-full"      speed={1}      amplitude={1}      gloss={28}      influence={1}      opacity={0.95}    />  )}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add sheen

Usage

import { Sheen } from "@/components/motion/sheen"
<Sheen className="h-[420px] w-full" />

API Reference

Sheen

PropTypeDefault
backgroundColorstring—
speednumber1
amplitudenumber1
glossnumber28
influencenumber1
opacitynumber0.95
softnumber2
dprnumber1.5
classNamestring—
childrenReactNode—

Also accepts the other native div attributes.