ComponentsText effects
Waterline Card
A card where moving the pointer across it pulls a glowing waterline, and the text behind the line reads differently.
"use client";
import { WaterlineCard } from "@/components/miyuki-ui/waterline-card";
export default function WaterlineCardDemo() {
return (
<WaterlineCard className="max-w-xl" text="The lake looks frozen." revealText="It is only resting.">
<h3 className="text-base font-semibold text-foreground">Lake Tōya never freezes</h3>
<p className="mt-1 text-sm text-muted-foreground">Move across the card to see why.</p>
</WaterlineCard>
);
}Install
npx shadcn@latest add @miyuki-ui/waterline-cardThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
WaterlineCard
Prop
Type
Vertical Text
Text set top to bottom in columns that run right to left, with Latin turned or upright, numerals stood upright in pairs and punctuation hung outside the measure.
Wavering Text
Text that wobbles as if drawn by hand, or wavers as if seen through moving water, using an SVG displacement filter.