Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
cursor-depth-logo-demo
'%20d%3D'M600%20150C660%20400%20800%20540%201050%20600C800%20660%20660%20800%20600%201050C540%20800%20400%20660%20150%20600C400%20540%20540%20400%20600%20150Z'%2F%3E%3Cpath%20fill%3D'url(%23b)'%20d%3D'M600%20340C632%20500%20700%20568%20860%20600C700%20632%20632%20700%20600%20860C568%20700%20500%20632%20340%20600C500%20568%20568%20500%20600%20340Z'%2F%3E%3Ccircle%20cx%3D'600'%20cy%3D'600'%20r%3D'46'%20fill%3D'%23fff8ef'%2F%3E%3C%2Fsvg%3E)
import { CursorDepthLogo } from "@/registry/tween/cursor-depth-logo"
export function CursorDepthLogoDemo() {
return <CursorDepthLogo />
}
Installation
Usage
import { CursorDepthLogo } from "@/components/ui/cursor-depth-logo"<CursorDepthLogo
logoSrc="/brand/corviel-mark.svg"
logoAlt="Corviel"
background="hsl(196, 70%, 42%)"
layers={[
{ size: 90, color: "hsl(198, 74%, 30%)", shadow: "hsl(200, 80%, 14%)" },
{ size: 45, color: "hsl(196, 72%, 38%)" },
{ size: 15, color: "hsl(194, 70%, 46%)" },
]}
/>Each slab is a full-bleed colored box with the logo silhouette subtracted out of it via a CSS mask, sized progressively smaller from front to back. A pointermove listener scoped to the hero records a cursor trail; every frame each slab samples a delayed point from that trail and lerps toward it, so deeper slabs lag further behind and the stack appears to swing in 3D. The real logo sits on top, untouched. Pointer tracking binds to the component element (never the window), so it never hijacks page scroll. When prefers-reduced-motion: reduce is set, the slabs stay centered and the trail loop never starts.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logoSrc | string | Velastra star (SVG) | Logo shown on top and used as the silhouette mask. |
logoAlt | string | "Velastra" | Alt text for the logo image. |
maskSrc | string | logoSrc | Separate silhouette mask; defaults to the logo's own alpha. |
background | string | hsl(26, 92%, 62%) | Hero background color. |
logoWidth | number | 200 | Rendered width of the front logo, in pixels. |
layers | CursorDepthLayer[] | 5 defaults | Slabs front-to-back: { size, color, shadow? }. size is mask % size. |
sensitivity | number | 0.3 | Fraction of the hero the cursor can push the stack across. |
lerp | number | 0.04 | Per-frame easing toward the cursor trail (lower = smoother). |
staggerDelay | number | 8 | Frames each successive slab lags behind the one in front. |
className | string | — | Extra classes on the hero container. |