V2

.cursor/skills/23rd/SKILL.md

@@ -74,7 +74,7 @@ npm dependencies the registry declares:
 
 | Item | React | Svelte |
 | --- | --- | --- |
-| `gooey-color-picker`, `tangle-footer`, `stretchy-footer` | `motion` | none |
+| `gooey-color-picker` | `motion` | none |
 | every other item | none | none |
 
 Published index: `https://23rd.dev/r/registry.json`. Docs: `https://23rd.dev/docs`.
@@ -92,14 +92,14 @@ flowchart TD
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
   atmo -->|Quiet wash| sg[shader-gradient]
-  atmo -->|Fire from the bottom| sf[shader-fire]
+  atmo -->|Cel-shaded fire from the bottom| saf[shader-anime-fire]
+  atmo -->|Soft fire wash from the bottom| sf[shader-fire]
   atmo -->|Sky or rain, optional glass| ss[shader-sky]
   atmo -->|ASCII mouse trails| af[ascii-fluid]
   atmo -->|Hyperspace streaks, scroll warp| rl[radiant-lines]
   atmo -->|Hair-line explosion| lb[logo-burst]
   atmo -->|Falling sheet music| ps[phosphor-score]
   foot -->|Rubber overscroll aurora| st[stretchy-footer]
-  foot -->|Spinning text ribbons| tf[tangle-footer]
   mark -->|Eyes that track the pointer| orb[live-orb]
   mark -->|ASCII wordmark, click to scatter| al[ascii-logo]
 ```
@@ -109,11 +109,11 @@ 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` |
+| Soft gradient behind a headline | `shader-gradient` | `gooey-color-picker` |
+| Fire, heat under a hero | `shader-anime-fire` | `dithered-404` unless the page is a 404 |
+| Quiet heat wash behind copy | `shader-fire` | `shader-anime-fire` when it should be the show |
+| 404 that burns under the cursor | `dithered-404` | `shader-anime-fire` |
+| Overscroll rubber band, aurora at the bottom | `stretchy-footer` | `folio` |
 | 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` |
@@ -134,14 +134,12 @@ Backgrounds and shaders fill the parent. They do not create a page.
 </section>
 ```
 
-Same shell for `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
+Same shell for `ShaderAnimeFire`, `ShaderFire`, `ShaderSky`, `AsciiFluid`, `LogoBurst`, `PhosphorScore`, and `Dithered404`. Give the parent a height. Put UI in a later stacking context (`relative z-10`).
 
 `RadiantLines` is transparent and warps with scroll. Inside an overflow div, pass the scroller (`containerRef` in React, `container` in Svelte) and make the canvas `sticky top-0 h-svh`. Omit the scroller to use the window.
 
 `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`).
 
-`TangleFooter` is a `<footer>`. It is not a background. Place it after the page.
-
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
 `LiveOrb` is a fixed square (`size`, default `280`). It does not fill the viewport. The body stays put; only the eyes move.
@@ -157,13 +155,12 @@ That matches shadcn / `next-themes` with `attribute="class"`. There is no shared
 
 Exceptions:
 
-- Passing `colors` to `ShaderGradient`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
+- Passing `colors` to `ShaderGradient`, `ShaderAnimeFire`, `ShaderFire`, or `ShaderSky` replaces the stock palette and does not swap with dark mode. Omit `colors` to get the light/dark pair.
 - Passing `color` (and `backgroundColor` where it exists) overrides ink. Omit it to follow the theme.
-- `TangleFooter` paints `--tangle-ribbon` and `--tangle-text` on itself when `ribbon` / `textColor` are omitted. Pass those props to override. `background` omitted uses `#EFEAE2` / `#121210`.
-- `PhosphorScore` canvas is transparent in light mode (`LIGHT_BG`) and `#050505` in dark mode (`DARK_BG`). A dark phosphor field is a hard rectangle. Clip the parent (`overflow-hidden rounded-*`) if the square edge matters. Open issue: the docs preview border looks boxed ([#28](https://github.com/radiumcoders/23rd.dev/issues/28)).
-- `Folio` tilt peaks at an internal 16°. It is not a prop. On a Mac trackpad the lean is easy to miss ([#29](https://github.com/radiumcoders/23rd.dev/issues/29)). Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
+- `PhosphorScore` canvas is transparent in both themes; the parent paints the background.
+- `Folio` tilt peaks at an internal 16°. It is not a prop. The lean follows wheel speed, so trackpads and mice lean alike. Do not add a tilt prop that does not exist. `playFolioDemo` only previews the lean; it is not the interaction.
 
-`prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch, no tangle spin). Do not add a `reducedMotion` prop.
+`prefers-reduced-motion: reduce` is honored by the canvas and motion components (still frame, no tilt, no stretch). Do not add a `reducedMotion` prop.
 
 ## Catalog
 
@@ -176,9 +173,9 @@ Categories match `content/docs/components/meta.json`.
 | `radiant-lines` | Background | Hyperspace streaks; warp follows scroll | React + Svelte |
 | `ascii-fluid` | Background | Pointer trails quantized to an ASCII brightness ramp | React + Svelte |
 | `shader-gradient` | Shaders | Quiet WebGL wash behind heroes and empty states | React + Svelte |
+| `shader-anime-fire` | Shaders | Cel-shaded flames licking up from the bottom | React + Svelte |
 | `shader-fire` | Shaders | Sparse fire tongues rising from the bottom | React + Svelte |
 | `shader-sky` | Shaders | Clear sky or rain; optional dotted window glass | React + Svelte |
-| `tangle-footer` | Footers | Five nested SVG text ribbons | React + Svelte |
 | `stretchy-footer` | Footers | Dia-style rubber overscroll with an aurora floor | React + Svelte |
 | `live-orb` | Characters | Lit sphere; eyes follow the pointer | React + Svelte |
 | `ascii-logo` | Characters | ASCII wordmark: hover shove, click scatter / fall / gather | React + Svelte |
@@ -234,29 +231,6 @@ export function Accent() {
 }
 ```
 
-Ribbon footer (not an overscroll effect):
-
-```bash
-pnpm dlx shadcn@latest add @23rd/tangle-footer
-```
-
-```tsx
-"use client"
-
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function SiteFooter() {
-  return (
-    <TangleFooter
-      lines={[
-        "Ship something opinionated.",
-        "Install what you need and move.",
-      ]}
-    />
-  )
-}
-```
-
 Svelte equivalents use `class`, default imports, and `@23rd/<name>-svelte`. Full prop tables are in [apis.md](apis.md). More assemblies are in [recipes.md](recipes.md).
 
 ## Adding a component

.cursor/skills/23rd/apis.md

@@ -83,7 +83,7 @@ type PhosphorScoreProps = {
 }
 ```
 
-`DARK_COLOR` `#4DFF6A`, `LIGHT_COLOR` `#147A3A`, `DARK_BG` `#050505`, `LIGHT_BG` `"transparent"`. A set `color` replaces ink only. Background still follows dark vs light.
+`DARK_COLOR` `#4DFF6A`, `LIGHT_COLOR` `#147A3A`, `DARK_BG` and `LIGHT_BG` are both `"transparent"`. A set `color` replaces ink only.
 
 ## radiant-lines
 
@@ -147,6 +147,28 @@ type ShaderGradientProps = {
 
 `LIGHT_FALLBACK` and `DARK_FALLBACK` are CSS background stacks used when WebGL is unavailable. Palette line in the engine: `options.colors ?? (dark ? DARK_COLORS : LIGHT_COLORS)`.
 
+## shader-anime-fire
+
+```ts
+type ShaderAnimeFireProps = {
+  colors?: string[] // ember, flame, core
+  speed?: number // 0.6
+  intensity?: number // 1
+  height?: number // 0.45
+  interactive?: boolean // true
+  dither?: boolean // false
+  pixelSize?: number // 1
+  theme?: "light" | "dark" | "auto"
+  className?: string
+}
+```
+
+`LIGHT_COLORS`: `#9C3A24`, `#C96A32`, `#E6C4A0`.
+
+`DARK_COLORS`: `#A33A18`, `#D4682A`, `#E8B45A`.
+
+Same `colors ?? theme palette` rule. Fallbacks exported as `LIGHT_FALLBACK` / `DARK_FALLBACK`.
+
 ## shader-fire
 
 ```ts
@@ -194,30 +216,6 @@ type ShaderSkyProps = {
 
 `skyFallback(colors, dark)` builds the CSS fallback. Custom `colors` do not swap.
 
-## tangle-footer
-
-```ts
-type TangleFooterProps = {
-  lines?: string[] // DEFAULT_LINES, five phrases
-  ribbon?: string
-  textColor?: string
-  background?: string // or "transparent"
-  height?: number // omit → half of measured width
-  seed?: number // 23
-  label?: string // "Site footer"
-  className?: string
-}
-```
-
-When `ribbon` / `textColor` are omitted the footer sets:
-
-- `--tangle-ribbon`: `#141414` / dark `#E8E4DC`
-- `--tangle-text`: `#F4F0E8` / dark `#161616`
-
-Stroke and fill read those variables. Field classes: `bg-[#EFEAE2] dark:bg-[#121210]` unless `background` is set.
-
-`RING_COUNT` is 5. Not a prop.
-
 ## stretchy-footer
 
 ```ts

.cursor/skills/23rd/components.md

@@ -44,7 +44,7 @@ Background. Two vertical staves. Notes fall, bloom at the playhead, then flare.
 
 Best fit: a music, broadcast, or terminal hero that should feel like a CRT score.
 
-Not this: fire (`shader-fire`), sky (`shader-sky`), a footer.
+Not this: fire (`shader-anime-fire`), sky (`shader-sky`), a footer.
 
 Deps: none. Key props: `color`, `glow` (50, range 0–100), `speed` (1.35 beats/s), `density` (1), `sway` (true), `seed` (23), `theme`.
 
@@ -61,7 +61,7 @@ export function Score() {
 }
 ```
 
-Pitfalls: omit `color` so theme can swap (dark `#4DFF6A` on `#050505`, light `#147A3A` on a transparent canvas). Dark mode paints a solid `#050505` rectangle — clip the parent. Issue [#28](https://github.com/radiumcoders/23rd.dev/issues/28) is that square edge. The docs sentence “Press d to toggle” is not implemented on the component or the demo. Do not add a `d` shortcut.
+Pitfalls: omit `color` so theme can swap (dark `#4DFF6A`, light `#147A3A`). The canvas is transparent in both themes; the parent paints the background. Issue [#28](https://github.com/radiumcoders/23rd.dev/issues/28) is that square edge. The docs sentence “Press d to toggle” is not implemented on the component or the demo. Do not add a `d` shortcut.
 
 ## radiant-lines
 
@@ -143,13 +143,39 @@ export function Hero() {
 
 Pitfalls: custom `colors` stick; they do not cross-fade into the dark palette. Stock light `#7CB4E0 #B4D8C4 #EFE4BC #D2D7EC`. Stock dark `#3A6FA0 #2F6B52 #8A6B32 #4A4D7A`. If WebGL fails, a CSS `LIGHT_FALLBACK` / `DARK_FALLBACK` radial stack is used. `interactive` eases the wash toward the pointer.
 
+## shader-anime-fire
+
+Shader. Cel-shaded flames lick up from the bottom edge in flat bands. Ember / flame / core.
+
+Best fit: fire along the floor of a hero. `dither` prints the bands as Bayer pixels.
+
+Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). A quiet wash (`shader-fire`).
+
+Deps: none. Key props: `colors`, `speed` (0.6), `intensity` (1), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
+
+```tsx
+"use client"
+import { ShaderAnimeFire } from "@/components/ui/shader-anime-fire"
+
+export function Hero() {
+  return (
+    <section className="relative isolate min-h-svh overflow-hidden bg-background">
+      <ShaderAnimeFire />
+      <div className="relative z-10 p-10">Your content</div>
+    </section>
+  )
+}
+```
+
+Pitfalls: `interactive` makes a plume of flame reach up toward the pointer. `dither` defaults off. Custom `colors` do not follow theme. Light `#D8341A #F9731E #FFBA3A`. Dark `#B4200A #FF6512 #FFC04A`.
+
 ## shader-fire
 
 Shader. Sparse tongues from the bottom edge. Ember / flame / highlight.
 
 Best fit: heat behind a hero. `dither` turns the wash into Bayer pixels.
 
-Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor).
+Not this: a 404 (`dithered-404` owns the burning glyph and the fireball cursor). Bold graphic flames (`shader-anime-fire`).
 
 Deps: none. Key props: `colors`, `speed` (0.55), `intensity` (0.55), `height` (0.45), `interactive` (true), `dither` (false), `pixelSize` (1), `theme`.
 
@@ -195,34 +221,13 @@ export function Sky() {
 
 Pitfalls: `interactive` defaults false (unlike gradient and fire). Custom `colors` stay put. Light `#2478C8 #8ECBF2 #F7FBFF #C5D8EC`. Dark `#9AA3AD #C8CED4 #5C6570 #3F4750`.
 
-## tangle-footer
-
-Footer. Five nested semicircle ribbons of repeated text. GPU rotation, pauses off-screen.
-
-Best fit: a site footer that is the visual, with a few phrases.
-
-Not this: rubber-band overscroll (`stretchy-footer`), a hero background.
-
-Deps: React needs `motion`. Svelte has none. Key props: `lines`, `ribbon`, `textColor`, `background`, `height`, `seed` (23), `label` (`"Site footer"`).
-
-```tsx
-"use client"
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function Footer() {
-  return <TangleFooter lines={["Open the docs.", "Install what you need."]} />
-}
-```
-
-Pitfalls: default height is half the measured width (upper semicircle, aspect `2 / 1`). A shorter `height` scales the nest down. `background="transparent"` when the parent already paints the stage. Theme colors when props are omitted: ribbon `#141414` / `#E8E4DC`, text `#F4F0E8` / `#161616`, field `#EFEAE2` / `#121210`, via `--tangle-ribbon` and `--tangle-text`. Reduced motion skips the spin. Default lines are the five sentences in `DEFAULT_LINES`.
-
 ## stretchy-footer
 
 Footer behavior. Overscroll past the bottom stretches an aurora and lifts the page, then snaps back.
 
 Best fit: a Dia-like end of a long page. The component can be the scroller, or an overlay on window / element scroll.
 
-Not this: tilting the page (`folio`), spinning type (`tangle-footer`).
+Not this: tilting the page (`folio`).
 
 Deps: React needs `motion`. Svelte uses `stretchy-footer-spring-vanilla.ts` and declares no npm deps. Key props: `children`, `scrollRef` / Svelte `scrollEl`, `windowScroll` (false), `contentSelector` (`[data-stretchy-page]`), `maxStretch` (280), `colors`, `stiffness` (380), `damping` (32), `columns` (48), `blur` (14), `glow` (0.22), `label`, `demoId`.
 
@@ -302,7 +307,7 @@ Page. A Bayer-dithered “404” burned by a fireball cursor into embers and smo
 
 Best fit: the not-found route, full viewport.
 
-Not this: decorative fire behind a normal hero (`shader-fire`). Set `dither={false}` only when you want the soft fire on the same 404 glyph.
+Not this: decorative fire behind a normal hero (`shader-anime-fire`). Set `dither={false}` only when you want the soft fire on the same 404 glyph.
 
 Deps: none. Key props: `color`, `pixelSize` (4), `brush` (28), `interactive` (true), `dither` (true), `theme`.
 
@@ -330,7 +335,7 @@ Section. The sheet tips one way on scroll down, the other on scroll up, blur on
 
 Best fit: a long editorial page that should feel like one sheet.
 
-Not this: overscroll aurora (`stretchy-footer`). Do not use it when the user needs an obvious effect on a trackpad — issue [#29](https://github.com/radiumcoders/23rd.dev/issues/29) says the lean is barely visible on Mac. The docs “show effect” button calls `playFolioDemo`; that is a preview, not a stronger public tilt.
+Not this: overscroll aurora (`stretchy-footer`). The lean follows wheel speed, so a fast trackpad swipe leans about as far as a mouse flick; slow reading-speed scrolls stay subtle. The docs “show effect” button calls `playFolioDemo`; that is a preview, not a stronger public tilt.
 
 Deps: none. Key props: `children`, `blur` (4), `perspective` (1000, floor 1000), `returnMs` (520), `windowScroll` (false), `contentSelector` (`[data-folio-page]`), `label` (`"Tilting page"`), `demoId`.
 

.cursor/skills/23rd/recipes.md

@@ -32,8 +32,9 @@ Swap the component, keep the shell:
 
 | Brief | Component | Extra props |
 | --- | --- | --- |
-| Fire along the floor | `ShaderFire` | `height={0.45}` |
-| Pixel fire | `ShaderFire` | `dither pixelSize={1}` |
+| Fire along the floor | `ShaderAnimeFire` | `height={0.45}` |
+| Pixel fire | `ShaderAnimeFire` | `dither pixelSize={3}` |
+| Soft heat wash | `ShaderFire` | defaults |
 | Blue sky | `ShaderSky` | leave `colors` unset |
 | Rain / dusk sky | `ShaderSky` | `theme="dark"` or `html.dark` |
 | Window glass | `ShaderSky` | `glass glassSize={7}` |
@@ -76,7 +77,7 @@ Svelte: `bind:this={scroller}` and `container={scroller}`.
 
 ## 404
 
-Use `dithered-404` on the not-found route. Do not also mount `shader-fire`.
+Use `dithered-404` on the not-found route. Do not also mount `shader-anime-fire`.
 
 ```tsx
 "use client"
@@ -97,32 +98,7 @@ export function NotFound() {
 }
 ```
 
-`dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-fire`.
-
-## Ribbon footer
-
-`tangle-footer` after the page, not inside the hero.
-
-```tsx
-"use client"
-
-import { TangleFooter } from "@/components/ui/tangle-footer"
-
-export function Footer() {
-  return (
-    <TangleFooter
-      seed={23}
-      lines={[
-        "Ship something opinionated.",
-        "Less boilerplate, clearer decisions.",
-        "Install what you need and move.",
-      ]}
-    />
-  )
-}
-```
-
-On a colored parent, set `background="transparent"` so the cream/near-black field does not paint a second plate.
+`dither={false}` keeps the 404 glyph and switches to soft fire. It does not turn the page into `shader-anime-fire`.
 
 ## Rubber overscroll
 
@@ -183,7 +159,7 @@ export function Essay() {
 }
 ```
 
-If the effect is too subtle, say so. Do not invent a `tilt` prop. Issue #29 tracks the Mac trackpad case. `playFolioDemo({ target, holdMs })` only runs the preview on a matching `demoId`.
+If the effect is too subtle, say so. Do not invent a `tilt` prop. `playFolioDemo({ target, holdMs })` only runs the preview on a matching `demoId`.
 
 Window mode:
 
@@ -248,10 +224,8 @@ export function Brand() {
 ## Anti-patterns
 
 - `ShaderGradient` as a color control, or `GooeyColorPicker` as a page background.
-- `TangleFooter` inside a hero to “add motion.” It is a footer with a fixed semicircle height.
 - `StretchyFooter` and `Folio` both wrapping the same scroll. Pick one owner of the scroll.
-- Two of `ShaderGradient`, `ShaderFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
+- Two of `ShaderGradient`, `ShaderAnimeFire`, `ShaderSky`, `AsciiFluid` in the same viewport.
 - Content as a sibling with no `z-10`, so the canvas eats clicks. Set `pointer-events-none` on the canvas wrapper when the field is decorative (`LogoBurst` click-to-replay is the exception).
-- `PhosphorScore` on a light card in dark mode without clipping. The canvas fills `#050505`.
 - Assuming `theme="auto"` recolors a shader after you passed `colors`. It will not.
 - Adding `variant` to anything but `LiveOrb`.