Logo Burst

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.

Installation

pnpm dlx shadcn@latest add @23rd/logo-burst

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/logo-burst

Usage

Give the parent a size. The canvas is transparent over bg-background.

"use client"

import { LogoBurst } from "@/components/ui/logo-burst"

export function HeroBurst() {
  return (
    <div className="relative h-svh w-full bg-background">
      <LogoBurst />
    </div>
  )
}

Pass children only if you want a mark in the hole. coreSize is then measured from that mark unless you lock it.

<LogoBurst>
  <img src="/mark.svg" alt="" className="size-20 rounded-[22%]" />
</LogoBurst>

Replay from outside by incrementing replayKey.

"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>
)
}

prefers-reduced-motion: reduce draws the settled field and skips the explosion and the inhale.

Props

color overrides the theme filament. Omit it and theme="auto" picks ink on light, bone on dark.