Edge Warp Rail
A case study read sideways. Vertical scroll drives a horizontal rail of media: wheel down, swipe, or grab the rail and drag, and the whole strip travels left. Tiles bend and recede at the left and right of the frame like a page turning, so leaving the viewport reads as motion rather than a cut, and a soft edge mask dissolves them at the rim. Portrait, square, and wide frames sit in one continuous line sized by their own proportions, with short note cards set between them. Images fade up from transparent as they load. It owns its own scroll container, so it embeds in a bounded box or fills the viewport; on small screens it becomes a plain vertical stack, and with reduced motion a native horizontal scroller with no scroll hijacking. No animation library.
npx shadcn@latest add https://ui.aryank.space/r/edge-warp-rail.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | EdgeWarpItem[] | sample rail of 15 frames and 4 notes | Ordered tiles. A media item sizes to the band height at its aspect; a note is a text card. |
| label / intro / tags | string / string / string[] | "BLANK" / intro line / three meta lines | Fixed corner overlay content. |
| background / textColor / mutedColor | string | "#f6f5f1" / "#17150f" / "#8b877c" | Surface, primary ink, and muted ink. |
| className / style | string / CSSProperties | undefined | Passed to the scroll container root. |
background / textColor / mutedColorcolorSurface, primary ink, and the muted note and caption ink.
label / intro / tagstextThe corner wordmark, its intro line, and the meta lines.
itemstextThe ordered rail: media tiles (src, alt, aspect) and note cards (eyebrow, heading, body) interleaved.