Interactive kinetic list and hover carousel projecting a floating WebGL preview with inertial momentum mesh-warping and pixel block entry/exit wave crossfading.
Interactive kinetic hover carousel. Hovering list items projects an orthographic WebGL preview that trails pointer velocity with inertia, vertex momentum distortion, and pixel wave entrance and exit dissolves.
pnpm dlx shadcn@latest add @spaceui/components-spaceui-velocity-hover-previewimport { VelocityHoverPreview } from '@/components/spaceui/velocity-hover-preview'
const sampleServices = [
{
id: '01',
num: '01',
title: 'Space UI Twilight Ring',
subtitle: 'Luminous Coastal Horizon & Twilight Shaders',
mediaUrl: 'https://cdn.spaceui.one/atom/samples/image-1.png',
},
{
id: '02',
num: '02',
title: 'Flora Kinetic Portrait',
subtitle: 'Botanical Florals & Reactive Micro-interactions',
mediaUrl: 'https://cdn.spaceui.one/atom/samples/image-2.png',
},
]
export default function Example() {
return <VelocityHoverPreview items={sampleServices} accentColor="#ffe9a8" />
}| Prop | Type | Default | Description |
|---|---|---|---|
items | PreviewItem[] | [] | Array of items with title, subtitle, mediaUrl, and num. |
accentColor | string | #ffe9a8 | Accent color of pixel wave transition bands (Aurum by default). |
gridDensity | number | 32 | Density of matrix blocks in transition waves. |
warpIntensity | number | 0.45 | Inertial momentum mesh distortion scale. |
onItemSelect | (item: PreviewItem) => void | — | Callback when a list item is clicked. |
An interactive WebGL image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.
ViewA dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.
ViewA WebGL image reveal component with dynamic pixel matrix wave and customizable neon accent border on scroll.
Viewpnpm dlx shadcn@latest add @spaceui/components-spaceui-ui