Logo Burst
Hairline tentacles burst from the center, then breathe slowly. Click to replay.
Preview
Installation
pnpm dlx shadcn@latest add @23rd/logo-burstOr from the public GitHub registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/logo-burstUsage
Give the parent a size; the canvas is transparent.
"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 to put a mark in the center.
<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>
)
}
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, or measured from children |
radius | number | 0.48, 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 |