Warped Gallery
Infinite project cards that bend as you scroll or drag. Raw WebGL renders images, video and titles together, with vertical browsing on mobile. Pure React and TypeScript, no graphics dependencies.
Lucent Drift
Velvet Static
Soft Collision
Phantom Layers
Liquid Echo
Blue Mirage
Neon Bloomnpx shadcn@latest add @compronents/warped-galleryInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| projects | readonly WarpedGalleryProject[] | — | Required ordered projects: title, image, optional imageSrcSet, video, href and aspectRatio. Standard browser srcset selects responsive media; metadata supplies the final aspect ratio. |
| background | string | "#000000" | Hex or RGB canvas background color. |
| titleColor | string | "#ffffff" | Hex or RGB title color. |
| showGrid | boolean | true | Draw the perspective floor grid on desktop. The source-page demo disables it. |
| playVideos | boolean | true | Play visible video cards, paused offscreen and for reduced motion. |
| openInNewTab | boolean | false | Open project links in a new tab with noopener noreferrer. |
| mobileBreakpoint | number | 649 | Container width in pixels where browsing switches to vertical. |
| scrollSensitivity | number | 1 | Multiplier for wheel, touch, drag and keyboard input. |
| className / style | string / CSSProperties | — | Size and compose the container. Give it or its parent an explicit height. |
| aria-label | string | "Featured projects. Scroll or drag to browse." | Accessible name for the focusable gallery region. |
None.