REFERENCE
- Gallery page: https://magpui.com/en/i/halloween-site-with-watching-eyeballs-a9d78b
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/halloween-site-with-watching-eyeballs-a9d78b/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/halloween-site-with-watching-eyeballs-a9d78b/clip.mp4
- Original post: https://x.com/tiffuixdesigner/status/2115811688998150356 by @tiffuixdesigner
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.
- Ornate Trick or Treat lettering: Ornate tattoo-style script lettering reading 'Trick or Treat' with a small 'or' in a banner, acid yellow #D7F21D with tiny sparkle stars, flat vector, crisp edges, transparent background, 2:1 aspect ratio
BUILD: Build a one-screen Halloween promo site where the visitor plays with creepy cartoon eyeballs to find a secret discount. It opens on a full-screen hypnotic spiral, then reveals a dark page with a big ornate "Trick or Treat" lettering in the center and large eyeballs scattered around the edges, all staring at the cursor. Clicking eyes makes them burst into red splatter; after enough bursts the screen floods red and a tombstone card rises with "You found the secret! 50% off" and a copyable code. Spooky, funny and very tactile.
DESIGN SYSTEM: Full viewport, no scroll. Background deep purple-black #1C0F24 with a faint repeating pattern of outlined eyes in #2A1835. Center: ornate script lettering (decorative blackletter/tattoo style, about 140px tall, use an SVG placeholder) in acid yellow #D7F21D with small sparkle stars, and a tiny 12px yellow line "Be careful." beneath. Eyeballs: 160-260px circles, sclera off-white #F1ECE6 with thin red veins and a soft gray inner shadow, iris green #3FA56B with a darker ring #1F6B43, black pupil, one white glossy highlight; partly cropped by the viewport edges. Intro spiral: concentric alternating stripes of #D7F21D and #120A16, about 40px wide. Reward card: purple tombstone shape #6B3FA0 with a darker outline, skull icon at top, "YOU FOUND THE SECRET!" in a chunky display font (yellow #F5E663), short body text, a big "50% OFF", a code chip and a yellow "Claim discount" pill button. Small "Made in" badge bottom-right in white with black text.
MOTION: Intro: the spiral rotates continuously (360deg per 4s, linear) and zooms in from scale 1 to 6 while fading out over 900ms cubic-bezier(0.7,0,0.84,0) when the user moves or clicks. Page reveal: lettering scales from 0.9 to 1 and fades in (500ms, cubic-bezier(0.22,1,0.36,1)), eyeballs pop in from the edges with a 70ms stagger and a spring overshoot. Tracking: each pupil and iris follows the pointer with a smoothed spring (stiffness about 120, damping 14), clamped to 35% of the eye radius; random blinks every 3-6s (eyelid scaleY 1 to 0 to 1 in 160ms). Hover: the hovered eye swells to 1.08 and tints pink #F4A6B4. Click: the eye squashes (scale 1.15 then 0), bursts into 30-50 red droplets #E3122B that fly out and leave splatter decals, and a red radial glow spreads from that point (600ms). Each burst adds red: the background gradually turns into a blurred red bloom #E0102A. After 4 bursts the screen floods red (800ms) and the tombstone card rises from below with a spring (translateY 120% to 0, 700ms, cubic-bezier(0.34,1.56,0.64,1)); popped eyes respawn faded after 4s.
SECTIONS: 1) Intro spiral overlay. 2) Main stage: background eye pattern, central lettering and tagline, ring of tracking eyeballs. 3) Red flood state with splatter. 4) Reward tombstone card with code and claim button, plus a small reset link.
IMPLEMENTATION: React + Motion for the intro, reveals and the card; eyeballs as SVG components with transforms driven by a pointer spring; splatter and droplets on one Canvas 2D layer on top (particles with gravity and fade, decals drawn once and kept). Keep the eyes as aria-hidden decoration but provide a visible "Find the secret" button for keyboard users that triggers the same reveal; the code chip copies on click with a toast. prefers-reduced-motion: skip the spiral, no tracking jitter or bursts, show the eyes still and a simple fade to the reward card on click. Limit particles to about 400 alive, pause when the tab is hidden, support touch (tap to pop, eyes track the last touch).
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, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Every eye's pupil follows the cursor smoothly and stays inside its eye.
- Popping eyes produces splatter, the screen floods red after a few pops, and the coupon card rises with a working copy button.
- Keyboard users can reach the reward without clicking eyes, and reduced motion removes the spiral, tracking and bursts.
