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

5 articles · #motion · showing 1-5

Code editor screen showing animation timing and CSS variable declarations

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.

motiondesign tokens

Abstract fluid motion animation with glowing color transitions on dark background

2026-06-30 · 8 min read

Framer Motion Advanced: Layout Animations, Shared Elements, useAnimate

Master Framer Motion's layout animations, shared element transitions, and the useAnimate hook to build fluid, production-ready React UIs in 2026.

framer motionreact

Abstract colorful motion blur animation representing GSAP React transitions

2026-06-29 · 8 min read

GSAP with React in 2026: ScrollTrigger, Timeline and the New Way

GSAP 3.12 with React in 2026 means useGSAP, Context cleanup, and ScrollTrigger that actually works with concurrent mode. Here's the real setup.

gsapreact animation

Code editor screen showing colorful React animation component code

2026-06-26 · 8 min read

Framer Motion in React: Animations That Feel Alive

Framer Motion gives React animations a physics-based feel that CSS transitions can't match. Here's how to actually use it without overcomplicating your components.

framer motionreact animation

Abstract colorful gradient wave motion on dark background

2026-06-23 · 7 min read

cubic-bezier in CSS: Custom Easing Functions Explained Simply

Master CSS cubic-bezier easing functions from scratch. Learn how the four control points work, when to ditch ease-in-out, and how to craft motion that actually feels good.

cubic-beziereasing

Free components in 41 visual styles

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

Browse components →