Text & typography / CSS
Underline reveal
An expressive underline for the words that matter.
Preparing the component workbench…
Text & typography / CSS
An expressive underline for the words that matter.
SOURCE / REACT · provisional
import UnderlineReveal from "@/components/buildwithme/underline-reveal/react";
<UnderlineReveal />// MIT · BuildWithMe-UI contributors. Original implementation.
'use client';
import { useAnimation, type AnimationProps } from './use-animation';
import './base.css';
import './underline-reveal.css';
export default function UnderlineReveal({
paused = false,
text = 'Make your mark.',
}: AnimationProps & { text?: string }) {
const { ref, active } = useAnimation(paused);
return (
<div ref={ref} className="bw-demo" data-active={active}>
<p className="bw-large-text bw-underline">{text}</p>
</div>
);
}
Install the registry item to receive all 7 files and their declared dependencies. Copying one file may require the other files shown here.