The Empire UI blog

2026-09-11 · 8 min read

Skeleton Loading Animation in CSS: Shimmer, Pulse, Wave Variants

Build shimmer, pulse, and wave skeleton loaders in pure CSS - no libraries needed. Covers keyframes, Tailwind variants, React integration, and accessibility.

Read →

2026-09-09 · 9 min read

Scroll Reveal Animation in React: AOS vs Framer Motion vs Intersection Observer

AOS, Framer Motion, or raw Intersection Observer - which actually belongs in your React project? A practical breakdown with real code and honest trade-offs.

Read →

2026-09-08 · 9 min read

Page Load Animation in React: First Paint, Stagger, Skeleton to Content

How to handle page load animations in React - from first paint flicker to skeleton-to-content transitions and stagger sequences that don't tank performance.

Read →

2026-09-07 · 8 min read

Popmotion: The Animation Engine Behind Framer Motion

Popmotion powers Framer Motion under the hood. Learn how to use it directly for physics-based animations, springs, and keyframes in JavaScript.

Read →

2026-09-07 · 8 min read

Confetti in React 2026: canvas-confetti, tsParticles and Pure CSS

Three real approaches to confetti in React - canvas-confetti, tsParticles, and zero-dependency CSS - with working code, bundle cost breakdowns, and when to use each.

Read →

2026-09-04 · 8 min read

CSS View Transitions Advanced: Cross-Document, Custom Animations

Cross-document view transitions landed in Chrome 126 - here's how to build custom named animations, morph elements between pages, and avoid the common pitfalls.

Read →

2026-08-30 · 8 min read

Progress Bar in Tailwind: Animated, Striped, Segmented Variants

Build animated, striped, and segmented progress bars with pure Tailwind CSS and React. No plugins needed - just utility classes and a bit of JavaScript.

Read →

2026-08-14 · 8 min read

Animated Number Counter in React: Stats That Count Up on Scroll

Build a scroll-triggered animated number counter in React using Intersection Observer - no library needed, just clean hooks and requestAnimationFrame.

Read →

2026-08-11 · 8 min read

UI Microinteractions in 2026: The Small Details That Make Users Stay

Microinteractions are the silent persuaders of good UX. Learn how to build the hover states, transitions, and feedback loops that keep users engaged in 2026.

Read →

2026-08-11 · 9 min read

Card Hover Effects in CSS: 12 Patterns From Subtle to Dramatic

12 card hover effects from barely-there lifts to full 3D flips - with copy-paste CSS, pitfalls to dodge, and when to actually use each one.

Read →

2026-08-10 · 8 min read

Scroll Progress Indicator in React: Bar, Circle and Sidebar Dots

Build a scroll progress bar, circular ring, and sidebar dot indicator in React using useRef and scroll events - no library needed.

Read →

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.

Read →

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.

Read →

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.

Read →

2026-07-28 · 9 min read

Framer Motion vs GSAP in 2026: Honest Comparison for Real Projects

Framer Motion or GSAP? In 2026 both are excellent - but they solve different problems. Here's the unfiltered breakdown so you pick the right one.

Read →

2026-07-27 · 8 min read

Advanced CSS Custom Properties: @property, Animatable Tokens

Master @property, typed CSS tokens, and animatable custom properties to build transitions that vanilla CSS variables simply can't do.

Read →

2026-07-26 · 8 min read

Motion Design Tokens: Systematising Easing, Duration and Delay

Stop hardcoding cubic-bezier values everywhere. Learn how to build a motion token system for easing, duration, and delay that scales across your entire design system.

Read →

2026-07-25 · 8 min read

Countdown Timer in React: Days, Hours, Flip Animation Variants

Build a React countdown timer with days, hours, minutes, seconds - plus flip card animations. Real code, zero dependencies beyond React 18.

Read →

2026-07-21 · 8 min read

Web Animations API in 2026: Native Animations Without a Library

The Web Animations API gives you keyframes, timing, and playback control in pure JavaScript - no Framer Motion, no GSAP. Here's how to use it properly in 2026.

Read →

2026-07-21 · 8 min read

Lottie Animations in React 2026: @lottiefiles/react, DotLottie Setup

How to add Lottie animations to React in 2026 - comparing @lottiefiles/react-lottie-player, lottie-react, and DotLottie with real setup code and gotchas.

Read →

2026-07-21 · 9 min read

GSAP ScrollTrigger in React: Pinning, Scrubbing and Timeline Sync

Master GSAP ScrollTrigger in React - pin sections, scrub timelines to scroll position, and sync complex animations without memory leaks or StrictMode bugs.

Read →

2026-07-21 · 8 min read

CSS offset-path: Animating Elements Along Custom Paths

Learn how CSS offset-path lets you animate elements along SVG and geometric paths - with real code examples, browser gotchas, and practical motion design tips.

Read →

2026-07-20 · 8 min read

CSS Shape Morphing: clip-path, offset-path and SVG Morph Techniques

Master CSS shape morphing with clip-path animations, offset-path motion trails, and SVG SMIL morphing - with real code examples and browser gotchas explained.

Read →

2026-07-20 · 8 min read

CSS @starting-style: Entry Animations Without JS Classes

CSS @starting-style lets you animate elements from their initial state on first render - no JS class toggling, no setTimeout hacks. Here's how it actually works.

Read →

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.

Read →

2026-07-20 · 9 min read

Anime.js v4 in 2026: Timeline, Stagger and SVG Animations

Anime.js v4 rewrote the timeline and stagger APIs completely. Here's how to actually use them in 2026 - with real SVG, scroll, and sequencing examples.

Read →

2026-07-19 · 8 min read

CSS Scroll Snap: Precise Scrolling Sections Without JavaScript

Master CSS Scroll Snap to build buttery-smooth, section-based scrolling experiences with zero JavaScript - just two properties and you're done.

Read →

2026-07-19 · 8 min read

Tailwind Scroll Animations: @starting-style and animation-timeline

Master scroll-driven animations in Tailwind v4 using @starting-style and animation-timeline. No JS libs needed - pure CSS that ships in 2026.

Read →

2026-07-14 · 8 min read

react-spring: Physics-Based Animations Without the Complexity

react-spring gives you spring physics animations in React without the math. Here's how to use useSpring, useTrail, and useTransition to build buttery UI motion.

Read →

2026-07-07 · 8 min read

Accordion in React: Radix vs Custom - Animated Height Transitions

Radix UI accordion vs rolling your own in React - animated height transitions, keyboard nav, and when each approach actually makes sense in 2026.

Read →

2026-07-06 · 8 min read

Holographic Effect in CSS: Rainbow Foil Cards and Badges

Build rainbow foil holographic cards and badges in pure CSS - conic-gradient, hue-rotate animations, and mouse-tracking tilt that actually looks like trading card foil.

Read →

2026-07-02 · 7 min read

Aurora Gradient CSS: Three Ways to Build the Effect From Scratch

Learn three distinct CSS techniques to build aurora gradient effects from scratch - animated conic gradients, blur-layered radials, and GPU-accelerated keyframes.

Read →

2026-06-26 · 8 min read

CSS Scroll Animations in 2026: @scroll-timeline, animation-timeline and View Transitions

Scroll-driven animations are now native CSS in 2026. Here's how @scroll-timeline, animation-timeline, and View Transitions actually work in production.

Read →

2026-06-24 · 8 min read

CSS @keyframes: The Complete Guide (Including the Parts Docs Skip)

Master CSS @keyframes from syntax basics to the timing tricks MDN glosses over. Real examples, gotchas, and patterns that actually hold up in production.

Read →

2026-06-23 · 8 min read

CSS Text Animations: Typewriter, Gradient Sweep, Reveal and More

Master CSS text animations in 2026 - typewriter effects, gradient sweeps, and cinematic reveals with clean, copy-paste code examples you'll actually use.

Read →

2026-06-19 · 8 min read

CSS Custom Properties: Dynamic Theming and Animation Tricks

CSS custom properties unlock dynamic theming, live animation control, and component-scoped design tokens - here's how to actually use them well in 2026.

Read →

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.

Read →

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.

Read →

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.

Read →

2026-06-13 · 6 min read

Free Stacked Cards Component for React - Cards Stack Animation

Discover the best free cards stack component for React, featuring smooth stacked card animations you can drop into any project in minutes.

Read →

2026-06-13 · 15 min read

React UI Components Complete Reference: 60+ Patterns with Code

Every React UI component pattern you'll actually use - buttons, cards, tabs, carousels, modals, and 55+ more. Real code, real decisions, no filler. Built on Tailwind v4.0.2.

Read →