Creative Display Primitives

Next-Gen Creative FX & Generative Shaders.

Hardware-accelerated WebGL2 shaders, 60 FPS Verlet particle physics, and retro luminance algorithms designed with zero token violations and seamless theme synchronization.

Explore 10 PrimitivesDocumentation & Sandbox
Engine Highlights

Engineered for 60 FPS Creative Fidelity

Built from the ground up for high-craft digital products, landing pages, and interactive software canvases.

60 FPS Verlet Physics

Sub-frame particle integration with velocity damping, cursor repulsion, and harmonic spring return.

Two-Tier Token Sync

Automatically extracts and syncs with CSS variables in light and dark modes with zero raw hex hardcoding.

Zero Layout Thrashing

GPU shaders and Canvas 2D particle buffers with IntersectionObserver pause loops when scrolled offscreen.

Retina DPR Scaling

Pixel-perfect high-density rendering with automatic aspect-ratio lock and responsive container resizing.

Component Suite

Explore the 10 Creative Primitives

High-performance display primitives ready to drop into modern web projects.

Move cursor to repel

Stipple & Pointillism

Try
Pointer reactive

Mesh Gradient

Try
Fluid ripples

Fluid Silk

Try
Specular chrome

Liquid Chrome

Try
60 FPS particle glyphs

ASCII Art & Retro Engine

Try
Topographic mesh

Dither Waves

Try
Real-time 60 FPS video shader

Dither Canvas

Try
Elastic grid

Grid Distortion

Try
Mesh warp

Image Grid Distortion

Try
Steer camera

Hyperspeed

Try
Developer Experience

Drop into Any App in Three Lines

Works with Next.js, Vite, Remix, or vanilla React. Zero external CSS configuration required.

HeroBanner.tsx
npm i @shavin/fx
import { StippleText, FluidSilk } from "@shavin/fx";

export function CreativeHero() {
  return (
    <div className="relative h-96 w-full rounded-[var(--radius-panel)] overflow-hidden bg-canvas">
      {/* GPU Fluid Fabric Background */}
      <FluidSilk speed={0.3} waveFrequency={2.0} className="absolute inset-0 opacity-40" />

      {/* Interactive 60 FPS Particle Headline */}
      <StippleText
        text="SHAVIN.FX"
        fontSize={96}
        pattern="grid"
        tint="accent"
        interactive={true}
        className="relative z-10 w-full h-full"
      />
    </div>
  );
}
Ready when you are

Ready to elevate your creative canvas? Try all primitives live

Jump directly into the documentation sandbox with natural trackpad zoom, spacebar panning, and instant JSX export.

Open Documentation PlaygroundView GitHub Repository