Experiment

Groovy Waves Lab

I have gone by tehwave online for years, so this is me testing whether waves can become more than a personal in-joke. I want them to function as a real design motif: edges, seams, and state changes that make interfaces feel less boxy without becoming heavy, distracting, or annoying to ship.

Ambient master field

This is the base renderer underneath everything on the page. Same canvas system, different placement rules. It respects reduced motion, keeps draw logic simple, and stays lightweight enough to be a viable UI layer instead of a one-off hero gimmick.

Variant micro-lab

Before I start embedding waves into cards, nav, and buttons, I want a small personality library. Each variant is the same rendering system with different frequencies, layer weights, and colour handling, so the motif can flex without becoming visually random.

Swell Stack

swell

The calm baseline. This is the version that feels closest to a reusable house style instead of an effect screaming for attention.

Interference Grid

interference

Denser crossings for interfaces that want a little more friction and energy without becoming noisy.

Ribbon Pulse

ribbon

A louder accent wave for hover, CTA, and state-change moments where a little drama is actually useful.

Contour Sweep

contour

More line than glow. This one feels technical, almost diagram-like, which makes it good for structural UI edges.

Chromatic Drift

chromatic

The most identity-driven variant. It leans into the `tehwave` nickname without needing a giant logo to do the job.

Tidal Noise

tidal

Chunkier and less polite. Good when I want the motion to feel organic rather than perfectly engineered.

Placement variants

The real question is not "can I render waves?" It is "where can they live in a component without breaking usability?" These examples test edge-bound halos, clipped bottom strips, embossed seams, and the occasional intentional silhouette break.

Inner halo

This is the clearest expression of the idea: the component stays readable, but the edge carries the `tehwave` fingerprint.

Bottom lip

Accordion / disclosure shell

A restrained option where the wave acts more like a footer accent. Technically it is just a clipped bottom strip, so it stays cheap to render.

The panel is normal. The wave just kisses the bottom edge.

Inner white seam

This is the subtle version. White-on-white lets the structure show up without reading as decoration pasted on top of the component.

Deep bottom pocket

Card footer reshaper

Same bottom strategy, just deeper. It starts to change the silhouette of the component without needing a whole new container shape.

Button states through the `tehwave` motif

Buttons are where this experiment either becomes real or falls apart. These states test whether the wave treatment can communicate default, hover, and active feedback while staying readable, reduced-motion friendly, and cheap enough to use more than once on a page.

Default / contained

A quiet state that keeps the label in charge

This is the safe default. The wave is clipped inside the button shell, so the identity is there, but the button still behaves like normal UI instead of a special effect.

Hover / intent

Same structure, faster motion when intent is clear

On hover, the wave grows and animates faster, but only on the button itself. That keeps the interaction crisp, avoids accidental triggers from nearby text, and still respects reduced motion when the OS asks for less animation.

Active / toggled

The expressive state, still trimmed for usability

This is the loudest state, but it is still constrained. The edge bleed is intentional, the amplitude is tuned down, and the renderer stays on the same lightweight canvas path as the rest of the experiment.