live demo
/ FloatingGeo
Holographic Geometry
Wireframe cubes, rings, and diamonds float in CSS 3D space, slowly rotating with perspective — no Three.js required.
/ best for
Tech brandsProduct launchesEmpty-state decoration
Light perf
Desktop only
/ layer 1
Translucent surface
/ layer 2
Translucent surface
/ layer 3
Translucent surface
live demo
/ backdrop-blur + gradient
Volumetric Glass Layers
Stacked translucent panels with backdrop blur and gradient borders create the feel of frosted glass floating above an active background.
/ best for
ModalsNavigation barsPremium card UIs
Medium perf
Mobile optimized
Compose
live demo
/ AnimatePresence
Depth Shift Panels
Hover or click to swap panels with synchronized blur, lift, and accent-gradient transitions — a tab system that feels three-dimensional.
/ best for
Feature explorersProduct showcasesComparison tables
Light perf
Mobile optimized
live demo
/ NodeNetwork
Reactive Node Graph
A canvas network of nodes connected by proximity-faded edges, gently pulsing — a versatile decoration for AI, network, and data products.
/ best for
AI productsNetwork toolsInfrastructure marketing
Medium perf
Mobile optimized
REFRACTION
/ background plate
/ glass surface
Refraction, not just blur.
The grid behind this card is being warped by an SVG displacement filter.
live demo
/ GlassRefractionCard
Glass Refraction Card
A floating card distorts the content behind it through an SVG displacement map — real refraction, not just blur, for a true glass feeling.
/ best for
Premium cardsModal headersInteractive showcases
Heavy perf
Desktop only
/ stroke draw · pathLength → fill
live demo
/ StrokeDrawHeadline
SVG Stroke Draw Headline
A large outlined word draws itself on with an animated stroke length, then fills in — a typographic equivalent of a curtain rising.
/ best for
Section openersBrand introsLogo reveals
Light perf
Mobile optimized