Glyph Tide

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/glyph-tide.tsx.

Install the pastetaste component "Glyph Tide" (glyph-tide) into this Next.js project and use it.

What it is: Status card whose oversized glyph (bolt, drop, flame) fills with liquid to a value. The wave runs faster while charging, jumps slosh and settle, the number counts along. Drag or keys can set the level.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/glyph-tide.json
   (it writes components/pastetaste/glyph-tide.tsx; install any npm packages it reports).
2. Import it: import { GlyphTide } from "@/components/pastetaste/glyph-tide" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- value: number = 85 — Fill level, 0 to 100. Changes move the level on a spring; big jumps slosh.
- active: boolean = false — Something is flowing in (charging, pouring, heating): the surface travels faster and rides higher, and the glow brightens.
- shape: 'bolt' | 'drop' | 'flame' = 'bolt' — Built-in glyph used as the vessel, oversized and cropped by the right and bottom edges.
- path: string — Your own glyph: an SVG path in a 600 × 816 frame (the card at its default ratio), anchored to the right edge. Wins over shape.
- tone: 'ink' | 'paper' | 'sand' = 'ink' — Card surface, type and empty-vessel colours.
- accent: string = orange / ink / clay per tone — Liquid and number colour (also --pt-tide-accent).
- lowAt: number = 15 — At or below this value, and not active, the liquid takes the low colour (--pt-tide-low). -1 turns the low state off.
- title / caption: ReactNode = 'Power bank' / 'charged' — Heading in the top-left (two short lines read best) and the small word under the number.
- message / detail: ReactNode — Two-line note at the bottom: a strong first line and a muted second line.
- format: (v: number) => string = '85%' — How the big number is written. It receives the animated level 0–100, so map it to your unit (litres, °C).
- onValueChange: (v: number) => void — Makes the card a slider: drag on it to pour the level to that height, or use arrows, Page Up/Down, Home and End.
- step: number = 1 — Step for dragging and the arrow keys (Page keys move ten steps).
- label / valueText: string / (v: number) => string = title / formatted value + caption — Accessible name and spoken value of the meter or slider.
- rise: boolean = true — The first fill rises from empty when the card scrolls into view, with the number counting up.
- glow: boolean = true on ink — Light from the liquid on the card around the glyph and a soft sheen above the surface.
- guides / radius: boolean / number = true / 28 — Hairline layout guides behind the type, and the corner radius in px.

Live preview: https://pastetaste.com/c/glyph-tide
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 16