16 guides

Advanced Techniques

Complex layouts, performance optimization, custom rendering, creative engineering - advanced CSS and React patterns for developers who want to go deeper.

Pillar guide

Advanced CSS & JavaScript Patterns: Production-Grade Techniques 2026

Master advanced CSS and JavaScript patterns used in production - container queries, cascade layers, GPU-composited animations, and design token architecture for scalable UIs in 2026.

Read the complete guide → 15 min

Advanced CSS and JavaScript patterns showing container queries, cascade layers, and GPU-composited animations in a production React app

All 16 guides

Colorful generative art abstract patterns rendered in a browser window

2026-07-30 · 9 min read

Generative Art With CSS: Randomness, Houdini and CSS Paint API

Learn how to create generative art purely in CSS using the Houdini Paint API, custom properties, and pseudo-randomness - no canvas, no JS required.

generative artcss

Code editor screen showing React scroll animation component in dark mode

2026-07-29 · 8 min read

Smooth Scrolling in React: Lenis, locomotive-scroll and Native CSS

Compare Lenis, locomotive-scroll, and native CSS scroll-behavior in React. Real code, real tradeoffs - pick the right tool before you ship your next project.

smooth scrollreact

Abstract GPU shader rendering colorful triangle on dark background

2026-07-29 · 9 min read

WebGPU in 2026: What It Is and Your First Triangle in JavaScript

WebGPU is the modern GPU API for the web - faster than WebGL, built for compute. Here's what it actually is and how to draw your first triangle in vanilla JS.

Colorful audio waveform visualization glowing on dark background

2026-07-29 · 9 min read

Audio Visualizer in React: Web Audio API + Canvas = Waveform Magic

Build a real-time audio visualizer in React using Web Audio API and Canvas. Frequency bars, waveforms, and animation loops - all wired up with hooks.

audio visualizerweb audio api

colorful abstract light distortion shader rendering on dark background

2026-07-29 · 9 min read

GLSL Shader Effects in React: Noise, Distortion and Color Grading

Learn how to wire GLSL shaders into React with Three.js and react-three-fiber - noise, UV distortion, and cinematic color grading with real working code.

colorful abstract SVG vector paths glowing on dark digital background

2026-07-29 · 9 min read

Advanced SVG Animation: stroke-dasharray, SMIL and JavaScript Sync

Master SVG animation with stroke-dasharray path tricks, SMIL declarative timing, and JavaScript sync for precise, performant motion that CSS alone can't do.

Colorful glowing particles scattered across a dark digital canvas background

2026-07-29 · 9 min read

Canvas Particle System From Scratch: Mouse Interaction, Color Fields

Build a canvas particle system with mouse interaction and color fields from scratch - no libraries, just vanilla JS, requestAnimationFrame, and a bit of math.

canvasparticles

abstract 3D geometric shapes rendered with colorful WebGL lighting effects

2026-07-29 · 9 min read

React Three Fiber in 2026: 3D Scenes, Shaders and Performance

Master React Three Fiber in 2026: build 3D scenes, write custom GLSL shaders, and hit 60fps on mobile with practical performance techniques.

react three fiberthree.js

Abstract colorful digital light wave background WebGL shader effect

2026-06-22 · 8 min read

WebGL Background Effects Without Three.js: Raw Shaders in React

Skip Three.js and write raw GLSL shaders directly in React. Here's how to build animated WebGL background effects with nothing but a canvas element.

Abstract colorful generative art on dark background display

2026-06-21 · 8 min read

CSS Houdini Paint Worklet: Custom Backgrounds No One Else Has

CSS Houdini Paint Worklets let you draw fully custom backgrounds in JavaScript and expose them as native CSS properties - here's how to actually use them.

Abstract colorful gradient motion blur representing smooth animated page transitions

2026-06-19 · 8 min read

Page Transitions in Next.js App Router: View Transitions API

How to add smooth page transitions in Next.js App Router using the View Transitions API - no libraries, just native browser APIs and a bit of wiring.

page transitionsnext.js

Colorful abstract motion graphics representing JSON-driven animation in a React app

2026-06-18 · 8 min read

Lottie Animations in React: Setup, Optimisation and Pitfalls

Learn how to integrate Lottie JSON animations into React apps - from first install to lazy loading, loop control, and avoiding the bundle-size traps most devs hit.

Colorful 3D particle cloud rendered in a dark browser WebGL canvas

2026-06-17 · 8 min read

Three.js with React: Particles, Blobs and Interactive 3D Scenes

Learn how to build interactive 3D scenes in React using react-three-fiber - particles, animated blobs, and GPU-powered WebGL effects without raw Three.js boilerplate.

colorful abstract particle animation rendered on a dark digital canvas

2026-06-15 · 8 min read

HTML Canvas Animations in React: Particles, Noise Fields, More

Learn how to wire up HTML Canvas animations in React - particle systems, Perlin noise fields, and requestAnimationFrame loops that don't leak memory.

Abstract layered geometric shapes scrolling in depth creating parallax visual effect

2026-06-14 · 8 min read

Parallax Scrolling in React: useScroll, GSAP and Pure CSS

Master parallax scrolling in React using Framer Motion's useScroll, GSAP ScrollTrigger, and pure CSS - with real code you can drop in today.

parallaxscrolling

Browse other topics

UI Styles (91)Components (77)React (67)Tailwind CSS (50)CSS Animations (44)Design Systems (24)Developer Tools (20)Comparisons (16)

Free components in 41 visual styles

React & Tailwind, copy-paste ready. Glassmorphism, neobrutalism, Y2K and more.

Browse components →