Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/artisan-developer/llms.txt

Use this file to discover all available pages before exploring further.

KineticHeadline renders an <h1> tag where each letter enters individually using Framer Motion’s staggered variant system. The component splits the text prop with Array.from() so multi-byte characters and emoji are handled correctly, then wraps each character in a motion.span. Letters spring upward from below with a subtle rotation, creating a lively hand-stamped feel that suits the artisan theme.

​
Props

PropTypeDefaultDescription
textstringrequiredThe headline text to animate letter-by-letter.
classNamestring""Additional CSS classes applied to the <h1> wrapper.

​
Animation details

The animation is coordinated through two Framer Motion variant objects — one for the container motion.h1 and one shared by every letter motion.span. Container variants control sequencing:
PropertyValue
staggerChildren0.05s
delayChildren0.1s
Letter variants define the hidden → visible transition:
Stateopacityyrotate
hidden050px-20°
visible10px0°
The transition type is spring with damping: 12 and stiffness: 100. Lower damping makes the spring bouncier; raising it produces a crisper snap-to-rest. On hover, each individual letter switches to text-teal-400 via a Tailwind hover class and a 300ms CSS transition — you can hover over single letters independently because each is its own motion.span.

​
Example usage

<KineticHeadline
  text="Alysha Pursley"
  className="text-6xl font-bold text-teal-900"
/>
The className prop is forwarded to the motion.h1 wrapper alongside the internal flex flex-wrap justify-center classes, so you can override font size, color, alignment, and spacing without touching the component file.
Space characters receive a marginRight: '0.3em' inline style instead of being rendered as literal space spans. This ensures words stay correctly spaced after the text is split into individual characters — without it, adjacent words would collapse together because flexbox ignores whitespace-only spans.

Build docs developers (and LLMs) love

Get started for freeTalk to us