Six mark languages
Move between clean rules, broad brush shapes, waves, dots, doubles, and framing brackets.
Type & emphasis
Kinetic Underline
Turn the smallest typographic gesture into a deliberate piece of choreography. Draw a sweep, brush, double rule, wave, dotted signal, or bracket without sacrificing readable text.
Kinetic underline / CSS
Ideas deserve momentum
Underline with intent
A line can direct attention without competing for it.
Use kinetic underlines for selected claims, chapter titles, and calls to action. The motion should clarify hierarchy, then settle.
Responsive typography
Long authored phrases fit against both container width and height.
Motion-safe export
Every dependency-free fragment includes a complete reduced-motion state.
Three-step workflow
How to use the Kinetic Underline studio
- Write one focused phrase
Give the mark a clear target rather than underlining an entire paragraph.
- Tune weight and distance
Match line thickness, offset, and width to the typeface and hierarchy.
- Replay at real size
Check the draw at narrow and wide widths before copying the standalone fragment.
Questions, answered.
Is the headline still selectable?
Yes. The mark is decorative CSS and the authored headline remains ordinary text.
Can the animation play once?
Yes. Disable repeat and the line stays in its finished position.
Does it need JavaScript?
No. The exported motion is entirely CSS-driven.
What happens with reduced motion?
The completed underline appears immediately with no transition.