Premium UI Toolkit

All 8 libraries.
One page. Zero slop.

KokonutUI liquid glass · React Bits aurora · Anime.js v4 scroll · Motion springs · Rive interactive · Magic UI beams — working together in static HTML.

KokonutUIReact BitsAnime.js v4 MotionRiveMagic UI
01 — KokonutUI technique

Liquid glass cards

The exact SVG filter technique from KokonutUI's flagship component (feTurbulence → feDisplacementMap), ported to vanilla CSS. This is what Apple's 2026 liquid glass look is built on.

🫧 Glass A

fractalNoise displacement with scale=30 — the refraction wobble you see on premium sites.

🔮 Glass B

Same filter, layered inset shadows for depth. Refresh the page — it re-appears via Anime.js.

✨ Glass C

Fully CSS/SVG — no images, no canvas, no heavy deps. Static-site safe.

02 — React Bits style

Aurora gradient background

Radial gradients + heavy blur + slow drift — the React Bits "aurora" background look, implemented with pure CSS so it runs on any static page.

03 — Magic UI style: animated beams

Magic UI's beam effect — sweeping light lines — ported to pure CSS keyframes. In the real library these are SVG paths between any two elements.

04 — Motion (physics)

Spring physics — grab the box

Motion's spring() with drag. Hover it, click it, drag it — it returns with real physics, not linear easing.

drag me
spring({ stiffness: 150, damping: 12 }) — from the motion CDN build
05 — Rive interactive

Rive runtime in a canvas

A real .riv file (from Rive's public CDN) driven by the @rive-app/canvas runtime with a state machine — the same tech Figma's homepage uses.

06 — Anime.js v4

Scroll-triggered everything

Every section on this page fades + slides in via Anime.js v4 — named imports from the importmap, IntersectionObserver triggers, no v3 syntax anywhere.