---
id: "2115718048103682330"
source: https://x.com/ikeryou/status/2115718048103682330
author: "ikeryou (@ikeryou)"
media: "video, 2260x1570, 15.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Tape Roll Range Sliders

## Summary
Five range sliders reimagined as rolls of coloured tape: each thumb is a small 3D tape roll with a cardboard core, and dragging it right unrolls a glossy strip of tape behind it while dragging left rolls it back up. A tiny numeric value sits at the end of each thin track. A witty, physical metaphor that makes a plain input feel tangible and satisfying.

## Style
- Theme: light (pure white canvas)
- Mood: playful, tactile, witty, colourful, crafted
- Tags: range-slider, skeuomorphic, tape-roll, 3d-thumb, webgl, input-control, microinteraction, rainbow
- Category: Components, 3D

## Palette
| Role | Hex |
|---|---|
| Canvas white | #FFFFFF |
| Track grey | #C4C4C4 |
| Cardboard core | #DA9F59 |
| Tape red | #D6232F |
| Tape yellow | #E9B420 |
| Tape green | #2DA640 |
| Tape blue | #1E57C8 |
| Tape purple | #7A35C2 |

## Typography
- Value labels only (75, 81, 18, 80, 50): tiny sans numerals, regular weight, slate grey (#4D545E), about 1% of frame height, placed just right of each track end or under the roll when it reaches the end. Inter Regular at 9px with tabular-nums.
- No other text.

## Layout
- Roughly 3:2 frame (2260x1570), white, with the slider stack in the upper-left two thirds.
- Five sliders stacked vertically with equal 72px spacing at 1x; each track is about 260px long and 1px thick, mid grey.
- The tape strip sits slightly above and in front of the track, about 10px tall, with the roll at its leading end.
- Rolls are about 34px in diameter and 22px deep, viewed at a slight top-down three-quarter angle so the top face and side band both show.
- Each roll casts a soft grey blurred shadow below-right (about 8px offset, 12px blur, 25% opacity).

## Elements
- Tape strip: flat ribbon in the slider colour with a soft white specular highlight band that drifts along its length, giving a glossy plastic look.
- Tape roll thumb: cylinder with a saturated colour band, a darker rim, and a brown cardboard core visible on the top face.
- Track: thin grey line running the full slider length, with the value number at the right end.
- Drop shadow: soft ellipse under each roll, moving with it.
- Cursor: standard pointer and a small grab indicator dot on the active roll.

## Motion
- 0 to 3500ms: dragging the green slider from 18 to 100; the strip lengthens from the left edge and the roll spins forward (one turn per roughly 110px).
- 3500 to 6500ms: red moves to 42, blue to 100; dragging back rolls the tape up and the roll spins in reverse.
- 9000 to 15000ms: yellow, green, blue and purple are pulled down to 77, 50, 14 and 13.
- The roll follows the pointer with a light spring (stiffness about 300, damping 25), so it lags and settles in about 200ms.
- Value labels update every frame; the highlight on the tape shifts as the strip changes length.
- The roll's apparent diameter shrinks slightly as more tape unrolls, a nice subtle detail.

## Rebuild it
1. React component per slider wrapping a native `input type="range"` (visually hidden, still focusable) for accessibility.
2. Render the visible layer with React Three Fiber: a `CylinderGeometry` with an inner hole for the roll (or two cylinders, colour band plus brown core cap) and a thin `BoxGeometry` for the strip, both in `MeshPhysicalMaterial` with clearcoat 1 and roughness 0.3.
3. Map the slider value to x with Motion `useSpring(value, { stiffness: 300, damping: 25 })`; set strip scale.x and position from it, and roll rotation.z to `-x / radius`.
4. Shrink the roll radius with `useTransform(value, [0, 100], [17, 13])`.
5. Soft shadows: `ContactShadows` from drei or a blurred ellipse sprite under each roll.
6. For a CSS-only take, draw the roll as a stacked pair of ellipses with gradients and use `transform: rotate()` on a radial stripe pattern for the spin.

## Generation prompt
Five horizontal range sliders on a pure white background, each one a glossy roll of coloured tape (red, yellow, green, blue, purple) with a brown cardboard core that unrolls a shiny tape strip along a thin grey track as it is dragged, small grey numbers at the end of each track, soft drop shadows, playful tactile 3D UI microinteraction, clean and minimal.