Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { FluidPortraitHero } from "@/registry/tween/fluid-portrait-hero"
export function FluidPortraitHeroDemo() {
return <FluidPortraitHero />
}
import { FluidPortraitHero } from "@/components/ui/fluid-portrait-hero"<FluidPortraitHero topImage="/portrait-a.jpg" bottomImage="/portrait-b.jpg" />A full-bleed orthographic plane is rendered through two shader passes. The first pass simulates a trail: each frame decays the previous frame by decay and adds intensity along the segment between the cursor’s last and current position, ping-ponging between two render targets so the trail accumulates and fades. The second pass samples that trail and uses it as a smoothstep mask to mix between the topImage (shown at rest) and the bottomImage (revealed wherever you have moved), with a cover-fit UV so each portrait fills the frame at any aspect. Pointer input is scoped to the hero element and the renderer is sized to it via a ResizeObserver, so it behaves inside the docs preview and at full screen. When prefers-reduced-motion: reduce is set, a single static frame of the top portrait is rendered with no simulation loop.
| Prop | Type | Default | Description |
|---|---|---|---|
topImage | string | default | Cut-out portrait shown at rest; the trail wipes it away. |
bottomImage | string | default | Cut-out portrait revealed wherever the cursor has moved. |
brandLine1 | React.ReactNode | "MOHAMMAD" | First brand line (white). |
brandLine2 | React.ReactNode | "" | Optional second brand line (accent red); hidden when empty. |
brandMeta | React.ReactNode | "Portfolio · M.26" | Small kicker under the brand. |
ringPhrases | string[] | default | Phrases that orbit the portrait on the curved ring. |
tapeText | React.ReactNode | "MOHAMMAD" | Repeating text on the diagonal banner. |
ghostWord | string | "MOHAMMAD" | Huge ghosted wordmark behind the figure (split on space). |
rightLabelTop | React.ReactNode | default | Rotated label on the right edge, upper. |
rightLabelBottom | React.ReactNode | default | Rotated label on the right edge, lower. |
sectionLabel | React.ReactNode | "Hero" | Active section label in the left rail. |
sideTabTitle | React.ReactNode | "W." | Title on the left edge tab. |
sideTabCaption | React.ReactNode | "Honors" | Caption on the left edge tab. |
background | string | "#0a0708" | Surface color. |
accent | string | "#c01726" | Accent red used across chrome and the reveal glow. |
keyColor | string | "" | Knock out a solid photo backdrop by color; "" disables it. |
keyThreshold | number | 0.16 | Color distance from keyColor that counts as background. |
keySoftness | number | 0.1 | Softness of the knockout edge. |
decay | number | 0.985 | Trail persistence per frame (0–1). |
lineWidth | number | 0.13 | Trail thickness in simulation UV space. |
className | string | — | Extra classes on the outer section. |