From 8f4b0750b28c77a6445f196683a146e6e5ac0eb5 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 24 Sep 2026 15:46:37 +0000 Subject: [PATCH 1/5] Add an image peel that curls a sticker off as you scroll. The sheet sticks to the nearest scroller, lifts from a chosen edge, and stops after the amount you set. Transparent art keeps its die-cut shape, and the docs preview can swap in another image. Co-authored-by: Jay Sharma --- .cursor/skills/23rd/SKILL.md | 83 ++-- .cursor/skills/23rd/apis.md | 65 ++- .cursor/skills/23rd/components.md | 25 + .cursor/skills/23rd/recipes.md | 40 +- README.md | 1 + content/docs/components/image-peel.mdx | 67 +++ content/docs/components/meta.json | 1 + public/image-peel.png | Bin 0 -> 1355843 bytes .../og/docs/components/image-peel/image.png | Bin 0 -> 41441 bytes .../og/docs/components/shader-sky/image.png | Bin 0 -> 45814 bytes public/r/image-peel-svelte.json | 15 + public/r/image-peel.json | 15 + public/r/registry.json | 26 ++ registry.json | 1 + registry/image-peel/image-peel-demo.tsx | 172 +++++++ registry/image-peel/image-peel-vanilla.ts | 440 ++++++++++++++++++ registry/image-peel/image-peel.svelte | 204 ++++++++ registry/image-peel/image-peel.tsx | 222 +++++++++ registry/image-peel/registry.json | 31 ++ skills/23rd/SKILL.md | 83 ++-- skills/23rd/apis.md | 65 ++- skills/23rd/components.md | 25 + skills/23rd/recipes.md | 40 +- 23 files changed, 1483 insertions(+), 138 deletions(-) create mode 100644 content/docs/components/image-peel.mdx create mode 100644 public/image-peel.png create mode 100644 public/og/docs/components/image-peel/image.png create mode 100644 public/og/docs/components/shader-sky/image.png create mode 100644 public/r/image-peel-svelte.json create mode 100644 public/r/image-peel.json create mode 100644 registry/image-peel/image-peel-demo.tsx create mode 100644 registry/image-peel/image-peel-vanilla.ts create mode 100644 registry/image-peel/image-peel.svelte create mode 100644 registry/image-peel/image-peel.tsx create mode 100644 registry/image-peel/registry.json diff --git a/.cursor/skills/23rd/SKILL.md b/.cursor/skills/23rd/SKILL.md index 74c8f92..24b9c07 100644 --- a/.cursor/skills/23rd/SKILL.md +++ b/.cursor/skills/23rd/SKILL.md @@ -18,12 +18,12 @@ metadata: This folder is checked in twice and the copies must stay identical. `skills/23rd/` is the path the skills CLI and [skills.sh](https://skills.sh) discover. `.cursor/skills/23rd/` is what Cursor loads as `/23rd` in this repo. -| File | Read it when | -| --- | --- | -| [components.md](components.md) | Picking a component, pitfalls, one working example | -| [apis.md](apis.md) | Writing props, callbacks, or theme behavior | -| [recipes.md](recipes.md) | Assembling a hero, 404, footer, or accent | -| [conventions.md](conventions.md) | Adding a component to this repo | +| File | Read it when | +| -------------------------------- | -------------------------------------------------- | +| [components.md](components.md) | Picking a component, pitfalls, one working example | +| [apis.md](apis.md) | Writing props, callbacks, or theme behavior | +| [recipes.md](recipes.md) | Assembling a hero, 404, footer, or accent | +| [conventions.md](conventions.md) | Adding a component to this repo | Do not invent props, CSS variables, or variants. If a prop is not in [apis.md](apis.md), it does not exist. @@ -72,10 +72,10 @@ import { ShaderGradient } from "@/components/ui/shader-gradient" npm dependencies the registry declares: -| Item | React | Svelte | -| --- | --- | --- | -| `gooey-color-picker`, `tangle-footer`, `stretchy-footer` | `motion` | none | -| every other item | none | none | +| Item | React | Svelte | +| -------------------------------------------------------- | -------- | ------ | +| `gooey-color-picker`, `tangle-footer`, `stretchy-footer` | `motion` | none | +| every other item | none | none | Published index: `https://23rd.dev/r/registry.json`. Docs: `https://23rd.dev/docs`. @@ -90,6 +90,7 @@ flowchart TD pick -->|Footer or page-end| foot{Treatment} pick -->|Full page 404| d404[dithered-404] pick -->|Scroll makes the page lean| folio[folio] + pick -->|Image peels away on scroll| peel[image-peel] pick -->|Character or wordmark| mark{Which} atmo -->|Quiet wash| sg[shader-gradient] atmo -->|Fire from the bottom| sf[shader-fire] @@ -106,20 +107,21 @@ flowchart TD Disambiguation that agents get wrong: -| User says | Use | Not | -| --- | --- | --- | -| Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. | -| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker`, `tangle-footer` | -| Fire, embers, heat under a hero | `shader-fire` | `dithered-404` unless the page is a 404 | -| 404 that burns under the cursor | `dithered-404` | `shader-fire` | -| Footer of nested spinning sentences | `tangle-footer` | `stretchy-footer` | -| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `tangle-footer` | -| Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) | -| Stars that speed up when you scroll | `radiant-lines` | `logo-burst` | -| Logo explodes into lines | `logo-burst` | `ascii-logo` | -| ASCII letters that shove, scatter, and fall | `ascii-logo` | `ascii-fluid` (trails, not a wordmark) | -| CRT notation, phosphor, staves | `phosphor-score` | `shader-sky` | -| A face / orb / mascot | `live-orb` | `logo-burst` | +| User says | Use | Not | +| ------------------------------------------------- | -------------------- | -------------------------------------------------------- | +| Color picker, swatch, hex, hue, alpha, eyedropper | `gooey-color-picker` | Any shader. Shaders are not controls. | +| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker`, `tangle-footer` | +| Fire, embers, heat under a hero | `shader-fire` | `dithered-404` unless the page is a 404 | +| 404 that burns under the cursor | `dithered-404` | `shader-fire` | +| Footer of nested spinning sentences | `tangle-footer` | `stretchy-footer` | +| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `tangle-footer` | +| Page leans while scrolling | `folio` | `stretchy-footer` (that one stretches, it does not tilt) | +| Image or sticker peels / curls off as you scroll | `image-peel` | `folio` (the page leans, it does not peel) | +| Stars that speed up when you scroll | `radiant-lines` | `logo-burst` | +| Logo explodes into lines | `logo-burst` | `ascii-logo` | +| ASCII letters that shove, scatter, and fall | `ascii-logo` | `ascii-fluid` (trails, not a wordmark) | +| CRT notation, phosphor, staves | `phosphor-score` | `shader-sky` | +| A face / orb / mascot | `live-orb` | `logo-burst` | There is one variant enum in the whole registry: `LiveOrb` `variant` is `"white" | "black" | "webgl" | "custom"`. Nothing else has `variant`. @@ -140,6 +142,8 @@ Same shell for `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorSc `Folio` and `StretchyFooter` are the scroller by default. Put the page in `children`. For a real document, set `windowScroll` and mark the tilting or lifting element (`data-folio-page` or `data-stretchy-page`). +`ImagePeel` is a tall sticky section (`h-[240vh]` unless you override it). Pass `src`. The sheet sticks to the nearest scroll parent and curls off as that scroller moves. `children` is what shows underneath. `side` is the edge that lifts. `amount` is how much of the image peels away at the end of the scroll (`1` clears it). Transparent pixels stay transparent, so a die-cut sticker peels in its own shape. + `TangleFooter` is a `