Glass carousel
A 3D-ish carousel of frosted-glass cards with a larger centre card, drag with momentum snap, arrows, arrow keys, dots and optional autoplay.
What it is for
landing feature highlights, publishing templates picker, onboarding tips, connect page integrations
Use it
1 · site.json
"effects": { "components": ["glass-carousel"] }or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components glass-carousel2 · import it
import { GlassCarousel } from '@/components/fx/ui';Files
components/fx/ui/GlassCarousel.tsxui-glass-carousel.cssstyles
Source
Idea from code.xr; the code is written for this kit.
Credits and licences: third-party notices.
Accessibility
- Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
- Reduced motion. With
prefers-reduced-motionon, animation settles to its finished state at once. - Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.