ComponentsText effects
Slipstream
Slipstream: a few words in a marked box that streak with speed lines and lean forward when you hover them.
"use client";
import { Slipstream } from "@/components/miyuki-ui/slipstream";
export default function SlipstreamDemo() {
return (
<h2 className="text-center font-display text-[2.75rem] leading-[1.2] font-semibold tracking-[-0.025em] text-balance">
From summit to valley
<br />
<Slipstream>in ninety seconds</Slipstream>
</h2>
);
}Install
npx shadcn@latest add @miyuki-ui/slipstreamThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
Slipstream
Prop
Type
Ripple Text
A line of text that behaves like a water surface: pressing a letter sends a wave both ways along the line, and the pointer pushes a small bow wave ahead of it.
Snow Cap Text
Large text that snow falls around and settles on, gathering in soft caps along the real tops of the letters until a letter is knocked.