TuffLogoStroke | Tuff Docs

Usage

once draws the logo in once on mount; breathe keeps a subtle pulse after the draw-in; hover waits for a hover.

Loading demo...

Loading demo...

Use once for splash, loading-complete, or first-view brand moments.
Use hover when the logo sits near an interactive affordance and shouldn't keep drawing attention.
Use breathe sparingly; repeating brand motion competes with primary UI feedback.
Keep custom colors close to the surrounding surface; high-saturation gradients suit calm backgrounds.
Don't wrap the SVG in another animation unless you've checked the combined reduced-motion behavior.

Prop	Type	Default	Description
`size`	`string \| number`	`120`	SVG width and height; numbers become px.
`mode`	`'once' \| 'breathe' \| 'hover' \| 'loop'`	`'once'`	Animation trigger; `loop` behaves as `breathe`.
`durationMs`	`number`	`2200`	Base animation duration in ms.
`strokeColor`	`string`	`'#4C4CFF'`	Outline stroke color.
`fillStartColor`	`string`	`'#199FFE'`	Start color of the core fill gradient.
`fillEndColor`	`string`	`'#810DC6'`	End color of the core fill gradient.
`outerStartColor`	`string`	`'#D73E4D'`	Start color of the outer radial gradient.
`outerEndColor`	`string`	`'#7F007F'`	End color of the outer radial gradient.

It renders one SVG with role="img" and the accessible name Tuff logo stroke animation.
mode="loop" is an alias of breathe kept for older call sites; both produce the same state class, so write breathe in new code.
Gradient and filter ids are generated per instance with useId(), so logos on one page never collide; snapshot tests should assert unique ids, not exact strings.
durationMs is written to --tx-tuff-logo-duration, and the breathe pulse derives from it.
Under reduced motion, nothing animates and the fully drawn state shows.

packages/tuffex/packages/components/src/tuff-logo-stroke/index.ts