405 guides · updated daily

The Empire UI blog

Practical guides on UI styles and effects - every article ships free, working React & Tailwind code.

All UI Styles Components React Tailwind Animation Tools Comparisons Design Systems Advanced

#react #css #tailwind #animation #glassmorphism #next.js #design #performance #accessibility #dark mode #css variables #framer motion #neumorphism #responsive #dashboard #saas #ecommerce #landing page #button #card #form #navigation #typography #gradient #patterns

6 articles · #3d · showing 1-6

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.

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 3D geometric shapes with glowing neon colors on dark background

2026-07-20 · 8 min read

CSS Flip Card: 3D Rotate Animation With and Without JavaScript

Build a CSS flip card with smooth 3D rotation - pure CSS hover, JavaScript click toggle, and React component. Code examples for every approach included.

Three-dimensional geometric cards floating with depth and shadow

2026-07-17 · 8 min read

3D Card Effect in Tailwind: [perspective] and rotate3d Utilities

Build interactive 3D card flip and tilt effects using Tailwind's arbitrary perspective values and rotate3d utilities - no extra libraries needed.

Colorful puffy 3D clay-style buttons rendered on a soft pastel background

2026-07-12 · 8 min read

Claymorphism Button in React: Puffy 3D Buttons with CSS box-shadow

Build puffy 3D claymorphism buttons in React using layered CSS box-shadow. Code examples, variants, hover animations, and Tailwind shortcuts included.

claymorphismbutton

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.

Free components in 41 visual styles

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

Browse components →