A wordmark that transforms into dashed vector paths as the cursor moves across its letters.
// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos
import { Component } from "@/components/ui/wordmark";
// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
return (
<div style={{ width: '100%', height: '480px', position: 'relative' }}>
<Component
text="21st.dev"
fontWeight={600}
fontSize={150}
reveal="letter"
dashLength={4}
dashGap={2}
specks={15}
fontFamily=""
color="#ffffff"
accentColor="#ffffff"
letterSpacing={-0.05}
reach={200}
softness={0.7}
strokeWidth={1.5}
speed={1}
lineStyle="dashed"
selection
labels
draggable
sweep
/>
</div>
)
}