Add Logo Burst — exploding hair-line tentacles

README.md

@@ -77,6 +77,7 @@ pnpm dlx shadcn@latest add radiumcoders/23rd.dev/gooey-color-picker
 | [ASCII Fluid](https://23rd.dev/docs/components/ascii-fluid)               | `@23rd/ascii-fluid`        | Mouse-trail WebGL fluid quantized to a clean ASCII brightness ramp                |
 | [ASCII Logo](https://23rd.dev/docs/components/ascii-logo)                 | `@23rd/ascii-logo`         | Interactive ASCII wordmark — hover shove, then click to scatter, drop, and gather |
 | [Gooey Color Picker](https://23rd.dev/docs/components/gooey-color-picker) | `@23rd/gooey-color-picker` | Floating swatch → hue wheel, alpha, hex — joined by an SVG gooey filter           |
+| [Logo Burst](https://23rd.dev/docs/components/logo-burst)                 | `@23rd/logo-burst`         | Hair-line tentacles explode from the center, then breathe — light and dark        |
 | [Radiant Lines](https://23rd.dev/docs/components/radiant-lines)           | `@23rd/radiant-lines`      | Hyperspace starfield background; warp speed driven by scroll                      |
 | [Shader Fire](https://23rd.dev/docs/components/shader-fire)               | `@23rd/shader-fire`        | Sparse 2D fire wash — tongues rise from the bottom behind a landing hero          |
 | [Shader Gradient](https://23rd.dev/docs/components/shader-gradient)       | `@23rd/shader-gradient`    | Quiet WebGL wash behind landing heroes, empty states, and marketing sections      |

content/docs/components/logo-burst.mdx

@@ -0,0 +1,137 @@
+---
+title: Logo Burst
+description: Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.
+---
+
+import { LogoBurstDemo } from "@/registry/logo-burst/logo-burst-demo"
+
+A brand-hero burst. Thin filaments detonate out of the center, tip particles lock in, then the field breathes. Click the field — or bump `replayKey` — to explode again. Default `theme="auto"` follows the site. Press `d` to toggle.
+
+<LogoBurstDemo />
+
+## Installation
+
+<CliCommand item="logo-burst" />
+
+Or install straight from the public GitHub source registry:
+
+<CliCommand item="logo-burst" github />
+
+## Usage
+
+Give the parent a size. The canvas is transparent over `bg-background`.
+
+<FrameworkCode>
+  <FrameworkReact>
+```tsx
+"use client"
+
+import { LogoBurst } from "@/components/ui/logo-burst"
+
+export function HeroBurst() {
+  return (
+    <div className="relative h-svh w-full bg-background">
+      <LogoBurst />
+    </div>
+  )
+}
+```
+  </FrameworkReact>
+  <FrameworkSvelte>
+```svelte
+<script>
+  import LogoBurst from "$lib/components/ui/logo-burst.svelte"
+</script>
+
+<div class="relative h-svh w-full bg-background">
+  <LogoBurst />
+</div>
+```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+Pass children only if you want a mark in the hole. `coreSize` is then measured from that mark unless you lock it.
+
+<FrameworkCode>
+  <FrameworkReact>
+    ```tsx
+    <LogoBurst>
+      <img src="/mark.svg" alt="" className="size-20 rounded-[22%]" />
+    </LogoBurst>
+    ```
+  </FrameworkReact>
+  <FrameworkSvelte>
+    ```svelte
+    <LogoBurst>
+      <img src="/mark.svg" alt="" class="size-20 rounded-[22%]" />
+    </LogoBurst>
+    ```
+  </FrameworkSvelte>
+</FrameworkCode>
+
+Replay from outside by incrementing `replayKey`.
+
+<FrameworkCode>
+  <FrameworkReact>
+```tsx
+"use client"
+
+import { useState } from "react"
+import { LogoBurst } from "@/components/ui/logo-burst"
+
+export function Replayable() {
+  const [key, setKey] = useState(0)
+
+return (
+
+<div className="relative h-96 bg-background">
+<LogoBurst replayKey={key} replayOnClick={false} />
+<button type="button" onClick={() => setKey((n) => n + 1)}>
+Replay
+</button>
+</div>
+)
+}
+
+````
+  </FrameworkReact>
+  <FrameworkSvelte>
+```svelte
+<script>
+  import LogoBurst from "$lib/components/ui/logo-burst.svelte"
+
+  let key = $state(0)
+</script>
+
+<div class="relative h-96 bg-background">
+  <LogoBurst replayKey={key} replayOnClick={false} />
+  <button type="button" onclick={() => (key += 1)}>Replay</button>
+</div>
+````
+
+  </FrameworkSvelte>
+</FrameworkCode>
+
+`prefers-reduced-motion: reduce` draws the settled field and skips the explosion and the inhale.
+
+## Props
+
+| Prop            | Type                          | Default                                                        |
+| --------------- | ----------------------------- | -------------------------------------------------------------- |
+| `children`      | `ReactNode` / `Snippet`       | none                                                           |
+| `tentacleCount` | `number`                      | `260`                                                          |
+| `color`         | `string`                      | theme ink / bone                                               |
+| `theme`         | `"light" \| "dark" \| "auto"` | `"auto"`                                                       |
+| `breathe`       | `boolean`                     | `true`                                                         |
+| `coreSize`      | `number`                      | `0` — lines meet at the origin; measured when children are set |
+| `radius`        | `number`                      | `0.48` — outer reach vs the shorter edge                       |
+| `duration`      | `number`                      | `1.35`                                                         |
+| `seed`          | `number`                      | `23`                                                           |
+| `particleRatio` | `number`                      | `0.62`                                                         |
+| `replayKey`     | `number`                      | `0`                                                            |
+| `replayOnClick` | `boolean`                     | `true`                                                         |
+| `label`         | `string`                      | `"Logo burst"`                                                 |
+| `className`     | `string`                      | React only                                                     |
+| `class`         | `string`                      | Svelte only                                                    |
+
+`color` overrides the theme filament. Omit it and `theme="auto"` picks ink on light, bone on dark.

content/docs/components/meta.json

@@ -2,6 +2,7 @@
   "title": "Components",
   "pages": [
     "---Background---",
+    "logo-burst",
     "radiant-lines",
     "ascii-fluid",
     "---Shaders---",

content/docs/getting-started.mdx

@@ -13,7 +13,7 @@ Or pull straight from the public GitHub source registry:
 
 <CliCommand item="shader-gradient" github />
 
-Swap `shader-gradient` for any item name — `shader-fire`, `live-orb`, `ascii-logo`, `radiant-lines`, `dithered-404`, `tangle-footer`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
+Swap `shader-gradient` for any item name — `shader-fire`, `live-orb`, `ascii-logo`, `logo-burst`, `radiant-lines`, `dithered-404`, `tangle-footer`, and so on. Svelte installs as `@23rd/<name>-svelte` and lands in `src/lib/components/ui/` so `$lib` imports resolve.
 
 ## Use a background or shader
 
@@ -54,11 +54,11 @@ Shaders such as [Shader Gradient](/docs/components/shader-gradient) and [Shader
 
 ## Browse
 
-| Category   | Components                                                                                           |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| Background | [Radiant Lines](/docs/components/radiant-lines), [ASCII Fluid](/docs/components/ascii-fluid)         |
-| Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Fire](/docs/components/shader-fire)     |
-| Footers    | [Tangle Footer](/docs/components/tangle-footer), [Stretchy Footer](/docs/components/stretchy-footer) |
-| Characters | [Live Orb](/docs/components/live-orb), [ASCII Logo](/docs/components/ascii-logo)                     |
-| Pages      | [Dithered 404](/docs/components/dithered-404)                                                       |
-| Components | [Gooey Color Picker](/docs/components/gooey-color-picker)                                            |
+| Category   | Components                                                                                                                              |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Background | [Logo Burst](/docs/components/logo-burst), [Radiant Lines](/docs/components/radiant-lines), [ASCII Fluid](/docs/components/ascii-fluid) |
+| Shaders    | [Shader Gradient](/docs/components/shader-gradient), [Shader Fire](/docs/components/shader-fire)                                        |
+| Footers    | [Tangle Footer](/docs/components/tangle-footer), [Stretchy Footer](/docs/components/stretchy-footer)                                    |
+| Characters | [Live Orb](/docs/components/live-orb), [ASCII Logo](/docs/components/ascii-logo)                                                        |
+| Pages      | [Dithered 404](/docs/components/dithered-404)                                                                                           |
+| Components | [Gooey Color Picker](/docs/components/gooey-color-picker)                                                                               |

content/docs/index.mdx

@@ -21,5 +21,6 @@ Most component kits hand you every option. 23rd picks a direction: spacing, radi
 - [ASCII Logo](/docs/components/ascii-logo) — interactive ASCII wordmark that scatters and falls
 - [Shader Gradient](/docs/components/shader-gradient) — quiet wash behind a landing hero
 - [Shader Fire](/docs/components/shader-fire) — sparse fire tongues under a landing hero
+- [Logo Burst](/docs/components/logo-burst) — hair-line tentacles explode from the center, then breathe
 - [Radiant Lines](/docs/components/radiant-lines) — hyperspace starfield background
 - [Dithered 404](/docs/components/dithered-404) — Bayer-pixel 404 that burns under a fireball cursor

public/r/registry.json

@@ -137,6 +137,32 @@
       ],
       "type": "registry:ui"
     },
+    {
+      "name": "logo-burst",
+      "title": "Logo Burst",
+      "description": "Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.",
+      "files": [
+        {
+          "path": "registry/logo-burst/logo-burst.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/logo-burst.tsx"
+        }
+      ],
+      "type": "registry:ui"
+    },
+    {
+      "name": "logo-burst-svelte",
+      "title": "Logo Burst",
+      "description": "Hair-line tentacles explode from the center, then keep a slow inhale. Follows light and dark.",
+      "files": [
+        {
+          "path": "registry/logo-burst/logo-burst.svelte",
+          "type": "registry:file",
+          "target": "src/lib/components/ui/logo-burst.svelte"
+        }
+      ],
+      "type": "registry:ui"
+    },
     {
       "name": "radiant-lines",
       "title": "Radiant Lines",

registry.json

@@ -8,6 +8,7 @@
     "registry/dithered-404/registry.json",
     "registry/gooey-color-picker/registry.json",
     "registry/live-orb/registry.json",
+    "registry/logo-burst/registry.json",
     "registry/radiant-lines/registry.json",
     "registry/shader-fire/registry.json",
     "registry/shader-gradient/registry.json",