Skip to content

feat: add cylinder carousel with concave and convex variants#88

Merged
starc007 merged 1 commit into
mainfrom
feat/cylinder-carousel
Jul 4, 2026
Merged

feat: add cylinder carousel with concave and convex variants#88
starc007 merged 1 commit into
mainfrom
feat/cylinder-carousel

Conversation

@starc007

@starc007 starc007 commented Jul 4, 2026

Copy link
Copy Markdown
Owner

What

New `cylinder-carousel` component (motion category): a draggable carousel whose round items ride the wall of a cylinder.

  • Concave (default): inside of the cylinder — center ball smallest, dipped into a valley, balls grow and climb toward the edges. Horizontal motion follows an interior perspective projection (slow through the center, accelerating off the edges).
  • Convex: outside of the cylinder — center ball biggest on an arch, shrinking evenly to the edges with uniform spacing.

Details

  • Drag (1:1), wheel, and arrow keys; release hands pointer velocity to a soft spring with momentum projection and snap to the nearest item.
  • Infinite wrap; exactly `visibleItems` in frame plus a half-visible ball straddling each edge.
  • Auto-fit: `itemSize` is a cap — balls shrink so the row keeps breathing room at any container width (ResizeObserver).
  • Off-stage balls set `visibility: hidden` so canvas/shader children stop painting; stage clips via `clip-path` (reliably clips GPU-composited children).
  • Reduced motion: no glide, direct snap.
  • Preview: 8 ShaderBackground circles with a Concave/Convex segment toggle.

Checks

  • `bun run check` clean (typecheck, lint, registry — 41 components).

@starc007 starc007 merged commit a8c46c1 into main Jul 4, 2026
2 checks passed
@starc007 starc007 deleted the feat/cylinder-carousel branch July 4, 2026 06:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant