library

effects

mcp

luggage sizer

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

A luggage size picker as one seamless 8-second loop on a 1080 × 1080 stage. A soft off-white card titled Luggage holds a matte white hard-shell suitcase with four ribs, corner guards, eight spinner wheels, a carry handle and a telescopic handle, ray-marched live in a WebGL2 fragment shader as one white clay material read from light, soft shadow and ambient occlusion, while the camera sways gently round it. Under it a segmented control offers Cabin, Medium, Large and Trunk, and a pointer picks each in turn. On every change the case dips a touch lower and wider, stretches up past its new height by about 4 % and settles, its width and depth following a beat later; the shell opens along its zip like an expandable case and closes again, the telescopic handle rises and drops back, and a highlight sweeps across the shell. Height, width and depth dimension lines are projected onto the case's edges with the same camera, with mono labels counting the centimetres; the volume in litres and the weight limit in kilograms count between sizes, "Good for" cross-fades from Weekend to 1 week, 2 weeks and Relocation, and the white thumb slides under the picked size. The case is one shader; the card is HTML and CSS with React; Geist and Geist Mono are local, so it runs offline. Every frame is a pure function of time, with window.render(t), window.__render(t), window.__LOOP and a ?rec mode for frame-exact video export; reduced motion shows one still.

what you get

prompt
Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
project
The Vite + React source code as a .zip, ready to run.
figma file
The editable design as a .fig file to import into Figma.

what's inside

  • size picker
  • segmented control
  • 3D product view
  • ray-marched suitcase
  • dimension lines
  • counting numbers
  • label cross-fade
  • scripted pointer
  • WebGL2 shader
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • webgl

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #EBEAE7
  • #F7F6F4
  • #16171B
  • #9A9AA2
  • #4A4E58
  • #ECEBE8
  • #FFFFFF

license

With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.

read the license