---
id: "2115623240358072496"
source: https://x.com/ikeryou/status/2115623240358072496
author: "ikeryou (@ikeryou)"
media: "video, 2912x1802, 36.4s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Text Portfolio with Physics Rope Toy

## Summary
A quiet, text-first portfolio page (sketched self-portrait, serif paragraphs, project links with small arrows) that hides a physics toy: a blue rope with a ball hangs along the left edge, and grabbing it lets you swing it across the page, where it loops, leaves a trail of tiny portrait doodles, or swaps into a black wrecking ball on a chain. The contrast between restrained typography and anarchic play is what makes it memorable.

## Style
- Theme: light (pale grey paper with ink and electric blue)
- Mood: playful, intellectual, quirky, minimal, surprising
- Tags: portfolio, physics, verlet-rope, easter-egg, serif-body, sketch-illustration, cursor-play, electric-blue
- Category: Motion, Landing page

## Palette
| Role | Hex |
|---|---|
| Paper grey | #F6F6F6 |
| Muted text | #A4A3AB |
| Rule grey | #CCCBD1 |
| Hover tint | #E7E6E9 |
| Highlight white | #FAFAFB |
| Link indigo | #312C76 |
| Rope blue | #2B22D9 |
| Ball black | #1E1E1E |
| Warm card | #FBF4EC |

## Typography
- Name in the sidebar: book serif, regular, title case, about 2.5% of frame height. Source Serif 4 or Newsreader.
- Role line: tiny grey serif 9px under the name, with an underlined company link.
- Body paragraphs: serif regular, 11 to 12px equivalent at this zoom, dark grey, 1.6 line height, narrow measure (about 55 characters); inline links underlined in indigo.
- Project link labels on the right ("...js", "Ray Color"): small serif with a north-east arrow glyph.
- Section heading ("Projects I'm particularly proud of"): serif, slightly larger, regular.
- Footer social links: 8px serif in two short rows.

## Layout
- 16:10 frame (2912x1802) on a pale grey page.
- Three columns: a fixed left sidebar about 18% wide (portrait sketch, name, role, footer links at the bottom), a centre text column about 22% wide, and a right column of project link labels aligned to the top of each paragraph.
- Paragraph blocks are separated by 1px hairline rules spanning the centre and right columns, 32px vertical rhythm.
- A thin vertical blue scroll indicator sits on the left edge of the centre column (2px wide, about 15% tall) and on the far right edge.
- No cards, no shadows on UI; only the black ball has a soft drop shadow.

## Elements
- Sketch portrait: small black ink line drawing of a bearded face with glasses and a cap, about 60px.
- Blue rope: 3px electric blue line made of linked segments, with tiny sketch heads threaded along it, ending in a blue glossy ball (about 20px).
- Wrecking ball: glossy black sphere about 70px wide with a sketch face sticker, hanging from a thick black chain that runs off the top of the frame.
- Rope trail: when swung, the rope draws looping orbits and leaves scattered mini doodles and blue particles over the text.
- Project preview card: a pale peach screenshot that appears under the loop (warm card colour).

## Motion
- 0 to 6000ms: page scrolls; the rope hangs at the left edge and sways gently with scroll velocity.
- 8000 to 15000ms: the black wrecking ball swings in from the top on its chain, pendulum period about 1800ms, and drags a cluster of sketch heads with it.
- 21000ms: back to the blue rope, now hanging along the left of the text column.
- 27000 to 34000ms: the rope is grabbed and whirled in wide ellipses across the page; its tail lags with a whip-like delay of about 150ms per segment and the trail fades over 600ms.
- Physics feels like Verlet integration with gravity of about 1200px per second squared and light damping (0.98).

## Rebuild it
1. React page with a `grid grid-cols-[220px_360px_1fr]` layout; sidebar `sticky top-0 h-screen`, serif type via Newsreader, body `text-[13px] leading-relaxed`.
2. Add a full-screen `<canvas>` overlay with `pointer-events: none` except on the rope handle.
3. Implement a Verlet rope: 30 points, distance constraints (8 iterations), gravity, and the first point pinned to the left edge; draw with `ctx.lineWidth = 3`, `strokeStyle = '#2B22D9'`.
4. On pointerdown near the ball, pin the last point to the cursor; on release, let momentum carry it.
5. Store the last 60 positions of the ball and draw a fading trail; spawn small doodle sprites along it with random rotation.
6. Use Motion only for page-level details: link hover underline (`scaleX` 0 to 1, 200ms) and fading paragraphs in with `whileInView`.

## Generation prompt
A minimal pale-grey personal portfolio page with a small ink sketch portrait, serif paragraphs separated by hairlines and project links with tiny arrows, interrupted by a playful physics toy: an electric blue rope with a glossy blue ball swinging and looping across the text, leaving scattered doodle faces and blue particles, and a glossy black wrecking ball on a chain swinging in from the top; quiet typography meets chaotic play.