---
id: "2115776816199974955"
source: https://x.com/onirenaud/status/2115776816199974955
author: "Renaud (@onirenaud)"
media: "video, 2104x1178, 17.5s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Halloween Crank And Pull-Chain Toggle

## Summary
An illustrated interactive scene for a studio website: in a dusky room with Halloween bunting, a hand-crank winch winds a cable that lifts a sheet ghost off a hanging light bulb, the bulb then drops to the floor, and the page flips to a light mode where a handwritten note invites you to pull a chain. It turns the dark mode switch into a small physical toy with real weight.

## Style
- Theme: mixed (dark navy and slate scenes, cream light mode)
- Mood: whimsical, cosy, handmade, spooky, playful
- Tags: illustration, theme-toggle, pull-chain, halloween, physics, interactive-scene, hand-lettering
- Category: Hero, Illustration

## Palette
| Role | Hex |
|---|---|
| Slate room | #555863 |
| Night navy | #171B2C |
| Wall shadow | #3D424D |
| Light mode cream | #E0DDD7 |
| Ink | #282835 |
| Cable grey | #6D6E77 |
| Bulb brass | #874311 |
| Reel orange | #E0611F |

## Typography
- Greeting ("Happy Halloween! from ..."): handwritten brush script, regular, mixed case, slanted, about 4% of frame height, off-white. Caveat (500) or Gochi Hand.
- Light mode note ("Switch to dark mode or Pull here"): same hand, dark ink, stacked on four lines with "Pull here" larger and underlined, plus a hand-drawn arrow. Caveat (600).
- Bunting letters: serif capitals printed on small triangular pennants. Cinzel (600).
- Corner UI ("Made by ..."): tiny sans 9px, grey. Inter (400).

## Layout
- 16:9 canvas (2104x1178); full-bleed illustration with the action in the left and centre thirds and a faint floor horizon at about 82% height.
- Bunting arcs across the top quarter with string lights; a vertical rod and pulley at about 58% from the left holding the orange film reel.
- Winch sits bottom left on a flat base about 7% of the width; a black cable runs from it along the floor and up to the bulb.
- Corner furniture: a monogram at bottom left, a "Made by" credit at bottom right, a 3-dot theme switch at top right, all at 9 to 12px.
- No cards, borders or radii; depth comes from soft floor glow ellipses and a vignette.

## Elements
- Halloween pennant bunting with warm fairy lights.
- Sheet ghost with two glowing yellow eyes hanging from a thin string.
- Clear glass bulb with a red-orange filament and a brass screw base, connected to a black cable.
- Orange film reel with five holes on a pulley.
- Cream hand-crank winch with a drum and a black handle.
- Pull switch: a tiny cone pendant on a string with a dashed motion tick.
- Custom cursor: a 14px dark ring with a light outline.

## Motion
- 0 to 3s: cursor drags the winch handle; the drum spins and the cable shortens, hoisting the ghost upward over about 2000ms with a slight sway (pendulum about 1.2s period).
- 3 to 6s: the ghost lifts off revealing the lit bulb; bunting and lights scroll up out of frame as the camera pans.
- 6 to 8s: the bulb drops and bounces on the floor (two damped bounces, about 600ms) and rolls slightly.
- 9 to 14s: the scene replays with the night palette; the greeting wipes in letter by letter.
- 15 to 17s: background cross-fades to cream over 400ms; the handwritten note and arrow draw on, the pull pendant swings gently.

## Rebuild it
1. Stage: `relative h-screen overflow-hidden bg-[#171B2C]` holding layered SVG illustrations positioned with percentages.
2. Winch: make the handle draggable with Motion `drag` constrained to a circle; convert angle to a `useMotionValue` for cable length.
3. Ghost and bulb: drive `y` from cable length via `useTransform`, add a `rotate` sway using `useSpring` (stiffness 60, damping 6).
4. Bulb drop: animate `y` with keyframes `[0, 400, 360, 400, 390, 400]` and `times` easing, about 0.6s.
5. Theme flip: toggle a `data-theme` on the stage and animate `backgroundColor` between #171B2C, #555863 and #E0DDD7 over 0.4s.
6. Hand-lettering: render the note as an SVG path and animate `pathLength` 0 to 1 in 900ms; the pull chain is a draggable pendant that triggers the toggle past 40px.

## Generation prompt
A cosy hand-illustrated interactive web scene at dusk: Halloween pennant bunting with fairy lights, a little sheet ghost with glowing eyes hanging on a string above a clear glass light bulb, an orange film reel on a pulley and a cream hand-crank winch winding a black cable; the ghost lifts, the bulb drops to the floor, then the scene flips to a warm cream light mode with a handwritten note pointing to a tiny pull chain; soft flat shading, whimsical and spooky, no logos.