Skip to content

tideComponent library

Serkan Baykal

Software developer

Getting started

Installation

Library

- Overview
- Lumen

Components Blocks Templates Home

© 2026 Serkan Baykal. Open source under MIT.

Theme

Applies site-wide

Mode

LightDark

Accent

GreenTealOliveGoldSageKalamata

Corners

SharpBalancedRounded

Surfaces

BorderedElevatedFlat

Backdrop colour0%

theme

:root {
  --aurora-strength: 0;
}

<html
  data-mode="light"
  data-accent="green"
  data-radius="balanced"
  data-surface="bordered"
>

Animated

Motion-led pieces: reveals, pointer effects, backdrops and counters. CSS where possible, springs where they earn their place.

01CSS
Text Reveal
Headline words rise out of a blur one after another. Pure CSS, so it plays before hydration.
02Motion
Magnetic
Wraps anything so it leans toward a hovering mouse pointer and springs back when it leaves.
03CSS
Spotlight Card
Card lit by a pool of light that follows the pointer, catching brighter on the rim.
04CSS
Marquee
Infinite ticker with faded edges that pauses on hover. Works as a Server Component.
05Motion
Number Ticker
Counts up on a spring the first time it scrolls into view, writing straight to the DOM.
06CSS
Video Backdrop
Background video that downloads only near the viewport, pauses off-screen and falls back to a poster.
07CSS
Aurora Backdrop
Slow-drifting pools of theme colour behind your surfaces. Transforms only: no blur filter, no image, no JavaScript.
08Motion
Dock
A launcher whose icons swell on springs as the mouse passes, with labels that float up on hover or focus.
09Motion
Dynamic Island
A dark pill that springs around live activity: a caption and value at rest, a progress rim traced around its edge, a glow in the activity's tone, detail when tapped.
10CSS
Morphing Button
A button whose label blurs from one state to the next, copy to copied or deploy to live, without its width jumping.
11CSS
Fluid Tabs
Tabs whose pill stretches toward the next tab before its trailing edge catches up, like a stretching droplet.
12Motion
Expandable Card
Cards that grow into a centred sheet and fold back to their place. Uses Motion's layout features, about 10 kB more.
13CSS
Stepper
Progress through a sequence: the line fills, finished steps turn to accent checkmarks and the current one glows.
14CSS
Hold to Confirm
A destructive action that fills while you hold it with pointer, Space or Enter, and drains if you let go early.
15CSS
Shimmer Text
A slow band of light passing across text, for loading states or a quiet highlight. Works as a Server Component.
16CSS
Inline Edit
Text that turns into a field in place, with an accent underline drawing in while you type.
17CSS
Scrub Slider
A pill you drag sideways to scrub a value, like the dials in a photo editor. Grabbing never jumps the value.
18CSS
Tilt Card
A card that tips toward the mouse in 3D with a glint where the pointer sits, then eases back flat.
19CSS
Typewriter
Types each phrase, holds it, erases it and moves on behind a soft caret. Screen readers hear the list once.
20CSS
Live Indicator
A status dot with a slow ripple for live data, presence and deploys, optionally in a pill.
21CSS
Scroll Progress
An accent hairline that fills as you scroll, driven by CSS scroll timelines with a light fallback.
22CSS
Scroll Text Reveal
A statement whose words light up one by one in reading order as it scrolls through the viewport.