V2

.cursor/skills/23rd/SKILL.md

@@ -3,8 +3,8 @@ name: 23rd
 description: >
   Install, choose, and compose 23rd shadcn/ui registry components for React and
   Svelte 5. Use when the user wants a UI component, background, shader, WebGL
-  wash, hero atmosphere, footer, 404, color picker, ASCII effect, starfield,
-  orb, or page-tilt from the 23rd registry (@23rd, 23rd.dev, radiumcoders/23rd.dev),
+  wash, hero atmosphere, footer, 404, color picker, typewriter text, ASCII effect,
+  starfield, orb, or page-tilt from the 23rd registry (@23rd, 23rd.dev, radiumcoders/23rd.dev),
   or when adding a new component to this registry. Covers install commands,
   import paths, props, theming, and when not to use each item.
 metadata:
@@ -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`.
@@ -91,15 +91,16 @@ flowchart TD
   pick -->|Full page 404| d404[dithered-404]
   pick -->|Scroll makes the page lean| folio[folio]
   pick -->|Character or wordmark| mark{Which}
+  pick -->|Type text out letter by letter| tw[typewriter]
   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,17 +110,18 @@ 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` |
 | 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` |
+| Typing effect, typewriter, text that types itself | `typewriter` | `ascii-logo` (a wordmark, not prose) |
 
 There is one variant enum in the whole registry: `LiveOrb` `variant` is `"white" | "black" | "webgl" | "custom"`. Nothing else has `variant`.
 
@@ -134,13 +136,13 @@ 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.
+`Typewriter` fills its parent like a background but is content: it types `text` in the mono font, inherits the font size, and inks in `currentColor`. Give the parent a height; the paper feeds up when the page fills.
 
 `GooeyColorPicker` is an inline control. It opens upward from the trigger. Give it room (`overflow-visible`); do not clip it in `overflow-hidden`.
 
@@ -157,13 +159,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,15 +177,16 @@ 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 |
 | `dithered-404` | Pages | Bayer 404 burned by a fireball cursor, then reforms | React + Svelte |
 | `folio` | Sections | Page leans on scroll, then springs flat | React + Svelte |
 | `gooey-color-picker` | Components | Swatch opens into hue, alpha, and hex under an SVG goo filter | React + Svelte |
+| `typewriter` | Components | A typeball on a rail types text letter by letter, returns at the margin | React + Svelte |
 
 ## Minimal installs that must be right
 
@@ -234,29 +236,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
@@ -364,6 +362,29 @@ type FolioPlayDetail = {
 
 React exports `playFolioDemo`, `FOLIO_PLAY` (`"folio:play"`), `applyFolioFrame`. The Svelte component listens for that window event. Reduced motion: no tilt, no blur.
 
+## typewriter
+
+```ts
+type TypewriterProps = {
+  text?: string // DEFAULT_TEXT; "\n" breaks a line
+  speed?: number // 14 characters per second, clamped 1–120
+  humanize?: boolean // true
+  loop?: boolean // true
+  hold?: number // 2600 ms on the finished page before looping
+  startDelay?: number // 600 ms before the first keystroke
+  columns?: number // 0 = fit the frame; never wider than the frame
+  ticks?: boolean // true
+  jitter?: number // 0.3, 0–1
+  sound?: boolean // false
+  onDone?: () => void // each time the last character lands
+  className?: string
+}
+```
+
+Also exported: `DEFAULT_TEXT`, `DEFAULT_SPEED`, `DEFAULT_HOLD`, `DEFAULT_START_DELAY`, `DEFAULT_JITTER`, `layoutTypewriter(text, columns)`, types `TypewriterStroke`, `TypewriterOptions`, `TypewriterInstance`.
+
+Vanilla `TypewriterInstance`: `{ setOptions, restart, destroy }`. Not returned to app code by the React component; remount with a `key` to type again.
+
 ## Events that are not props
 
 | Name | Constant | Who listens |