REFERENCE
- Gallery page: https://magpui.com/en/i/holographic-halloween-ticket-stubs-0d7d4f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-halloween-ticket-stubs-0d7d4f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/holographic-halloween-ticket-stubs-0d7d4f/clip.mp4
- Original post: https://x.com/shirotatakajo/status/2116165057222762647 by @shirotatakajo
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- Halloween ticket scenes: Set of six small flat vector Halloween scenes for ticket art windows: jack-o'-lantern, cute ghosts under a spider web, black cat with round yellow eyes, haunted window at night with a ghost, clouds over a dark sky, abstract orange pumpkin shapes; limited palette orange, black, cream, white, dusty navy; simple rounded shapes, no text, plain background, 4:3 each
BUILD: Build a collectible ticket card component: a horizontal admission ticket split into a main body and a tear-off stub, printed on holographic foil. The main body holds a small illustrated scene inside a postage-stamp frame; the right side carries bold stacked type, a number and a barcode. A series of tickets (01, 02, 03...) plays one after another, each sliding in with a slight tilt while a pearly rainbow sheen sweeps across the foil. It should feel tactile, festive and precious, like a pass you want to keep.
DESIGN SYSTEM: Ticket about 520x210px, aspect ~2.5:1, radius 6px, sitting on a near-black canvas (#14161c) with a faint 24px grid in #1d2028. Body ~72% width, stub ~28%, separated by a vertical perforation (row of 3px circular cut-outs) and two semicircle notches top and bottom (radius 8px). Outer edge of the art window is a postage-stamp scallop (repeating 6px half circles via CSS mask). Foil base: light silver #e8eaef blended with soft bands of lavender #c9c4e8, ice blue #cfe3f3 and butter yellow #f6e7a1. Typography: a heavy condensed grotesk for the stacked title (two lines, ~26px, tight 0.9 leading, ink #1a1a1a), a small rotated vertical label (~11px) reading the event name, a large ticket number in orange #f08a24 (~22px, bold), tiny monospaced meta rows (date, seat, time) at 8px in #555, and a barcode drawn with SVG bars. Scene palette per ticket: orange #f28c28, black #111, cream #efe9dc, ghost white #f4f4f4, dusty navy #2b3550. Soft shadow 0 18px 40px rgba(0,0,0,.45).
MOTION: Sequence: every 2200ms the next ticket enters. Enter: translateX 40px to 0, rotateZ -4deg to -2deg, rotateY 18deg to 0, opacity 0 to 1, 700ms cubic-bezier(.22,1,.36,1). Exit: translateX 0 to -40px, opacity to 0, 400ms cubic-bezier(.4,0,1,1). Foil sheen: a linear-gradient (115deg) rainbow band moves background-position from -120% to 220% over 1600ms cubic-bezier(.45,0,.2,1) during the enter, then idles with a slow 6s loop. On hover (desktop) the ticket tilts toward the pointer up to 8deg on both axes with a spring (stiffness 180, damping 18) and the sheen position follows pointer x. Small elements inside the scene (ghosts bobbing 4px, a spider dropping 12px, a cat blinking) loop every 1800-2400ms ease-in-out.
SECTIONS: Parts: foil card base, stamp-framed art window, perforation with notches, stacked title block, vertical side label, ticket number, meta rows, barcode, stub (repeats title, number, small barcode). States: idle (slow sheen), entering, hover tilt, pressed (scale .98, sheen brightens), torn (optional: drag the stub right past 60px and it rotates 10deg and falls away with 500ms ease-in, revealing a "Saved" check).
IMPLEMENTATION: React + Motion for the sequence, tilt and stub drag; foil done in CSS with layered gradients and mix-blend-mode: color-dodge / overlay plus a subtle noise texture; stamp edge and notches via CSS mask or an SVG clipPath; scenes as inline SVG so they stay crisp. Keep transforms on the card only (transform + opacity) so it runs at 60fps. prefers-reduced-motion: no auto-cycling or tilt, sheen static, tickets shown as a simple carousel with fade. Keyboard: the ticket stack is a carousel with prev/next buttons and arrow keys; focus ring 2px #f08a24 offset 3px; stub tear also available via a button.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names or the original illustrations; draw your own simple placeholder scenes (or leave the art window as a slot that accepts any image).
SUCCESS CHECK:
- Tickets enter one after another with tilt and a visible rainbow sheen sweep, then hover-tilt with the pointer.
- Stamp-scalloped art window, perforation and side notches render cleanly at 1x and 2x.
- With reduced motion enabled nothing auto-plays and the carousel still works by keyboard.
