Pixel Perfect UI — Lightweight UI Library for React
pixel-perfect.space · 267 words · saved by 1 readers
A lightweight, documentation-first UI library for React with bespoke components, animations, and effects you can copy, paste, and ship.
How the Gooey Effect Works The gooey effect uses an SVG filter chain with three primitives. Each one plays a critical role. Toggle them individually to see their contribution in the live preview. 1 feGaussianBlur Applies a Gaussian blur of 5px to the entire source graphic. This softens the edges of both the button and the "+" circle so they bleed into each other when close, creating the raw material for the gooey merge. <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" /> → Toggle off to see: without blur, there's nothing soft for the color matrix to sharpen, so the…
saved by
related reading
- Details That Make Interfaces Feel Betterjakub.kr
- The Easing Blueprintanimations.dev
- Liquid metal — Animated metal shader effectmetal.jakubantalik.com
- Shadersshaders.com
- Next-level frosted glass with backdrop-filter • Josh W. Comeaujoshwcomeau.com
- Components | Canvas UIcanvasui.dev
- performative-ui | AI-native React Componentsvorpus.github.io
- Introduction - Fancy Componentsfancycomponents.dev
- Canvas UI: Creative Canvas, WebGL and WebGPU Component Librarycanvasui.dev
- Introduction | Canvas UIcanvasui.dev
- The Art Of SVG Filters And Why It Is Awesome — Smashing Magazinesmashingmagazine.com
- You Might Not Need an Effect – Reactreact.dev