Spark UI
Jewel Case Rack

Customize

Covers28 images
Cover Captions12 items
Case Size
210
Spacing
36
Pull Out
45
Part Gap
14
Camera Tilt
22
Rack Turn
48
Carousel Speed
22
Slide Speed
100
Captions
Background
Plastic Tint
Font
Text Scale
100%

Jewel Case Rack

Hover
265 views•50 uses

Props

15 properties
coversstring[]28 images
Cover art, repeated along the rack.
titlesstring[]12 images
Printed on each cover in turn. Leave an entry empty for a plain cover.
caseSizenumber210
Width and height of a case.
spacingnumber36
Distance between neighbouring cases.
pullOutnumber45
How far the hovered case slides out.
spreadnumber14
Gap that opens either side of the hovered case.
tiltnumber22
How far the camera looks down on the rack.
turnnumber48
How far the rack is turned away from the camera.
driftnumber22
How fast the rack drifts. Negative runs it the other way; 0 holds it still.
speednumber100
Speed of the slide.
showTitlesbooleantrue
Print the captions on the covers.
backgroundcolor#cbcbcb
Table colour.
caseTintcolor#e4e8ef
Colour of the clear plastic.
fontFamilystringvar(--font-inter)…
Typeface for the captions.
textScalenumber100
Relative size of the captions.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add jewel-case-rack

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A long isometric rack of CD jewel cases drifting slowly along its length as an endless carousel. Hovering a case brings the rack to a stop and slides that case out of the row in its own plane, like fingering a disc off a shelf, while its neighbours follow part of the way and the rack parts around it.

KEY FEATURES

  • ·Every case is a real CSS 3D box: cover behind clear plastic, a black hinge with its knuckles, and translucent top and opening edges
  • ·The rack is viewed through a fixed isometric camera, so it reads as an object on a table rather than a flat grid
  • ·The hovered case slides furthest; the next three on each side follow at falling strengths, which turns a sweep of the pointer into a wave
  • ·Cases in front of and behind the hovered one shift apart a little, opening a gap so it can come out cleanly
  • ·The rack drifts as an endless loop, fading cases out at the front and back in at the far end; it eases to a stop on hover and picks up again when the pointer leaves