Velocity Hover Preview

Active on Canvas Stage

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.

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-velocity-hover-preview

pnpm dlx shadcn@latest add @spaceui/components-spaceui-velocity-hover-preview

Usage

Code

import { 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" />
}

Props

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.