Midnight Mercury Button
A production-ready midnight mercury button component for your Next.js application. Accessible, customizable, and built with modern standards.
Midnight Mercury Button
A liquid‑metal button that fuses spring‑smoothed tilt with a gooey SVG filter and premium lighting. Ideal for hero actions where motion should feel confident, not noisy.
- Liquid: Three mercury blobs animate and merge with a gooey filter.
- Tilt: Magnetic rotation driven by pointer position.
- Light: Specular glint tracks pointer on a separate z‑layer.
- Premium CTAs with cinematic motion
- Marketing hero sections
- Authenticated actions with emphasis
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | — | Custom classes for the button container. |
| children | ReactNode | — | Label text; defaults to 'Initiate Flux'. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.