Not just effects — a platform

What is RoyCSS?

RoyCSS is a modern, AI-native frontend engineering platform — CSS effects, components, patterns, design systems, developer tools, and AI assistance in one cohesive ecosystem.

CSS-First

1,749 production-ready effects, animations, and interactions. Copy-paste CSS, zero dependencies.

1,749 effects

Component System

60+ pro components — data grids, kanbans, schedulers, charts, forms. Built on shadcn/ui.

60+ components

AI-Native

RoyAI assistant, Roy Architect, Roy Pair, Roy Review. AI that understands your CSS.

4 AI agents

Developer Platform

64 developer tools, CLI, MCP server, inspector, sandbox. Everything from scaffolding to deployment.

64 tools

The RoyCSS workflow

From idea to production in four steps

A frictionless path from discovery to deployment — no build config, no lock-in, no JavaScript required.

01

Discover

Browse 1,749 effects + 62 products

02

Customize

Live preview, color controls, real-time updates

03

Copy

One-click CSS copy, framework-ready

04

Ship

Production-ready, accessible, performant

0

CSS Effects

0

Platform Products

0

Developer Tools

0+

Lines of CSS

Built for everyone

Who is it for?

Whether you ship a single landing page or manage a fleet of enterprise apps, RoyCSS meets you where you are.

Developers

Copy-paste CSS, zero dependencies, framework-agnostic

Designers

Design tokens, theme system, 10 OKLCH presets

Teams

Collaboration, governance, compliance, audit center

Enterprise

Cloud, CDN, edge, fleet management, SLAs

Beyond CSS · WebGL & Canvas

Advanced Visual Effects

When CSS alone isn't enough, RoyCSS extends to Three.js and Canvas 2D for immersive, GPU-accelerated visual experiences.

Animated 3D tubes follow your cursor with dynamic point-light coloring. Click to randomize the palette.

Three.js · WebGL

These effects use Three.js and Canvas 2D — install the dependencies and copy the component code to use them in your project.

Up and running in 60 seconds

Get Started

Install once, import the stylesheet, and drop a class on any element. Choose the path that matches your stack.

npm

npm install roycss

pnpm

pnpm add roycss

yarn

yarn add roycss

bun

bun add roycss

deno

deno add npm:roycss

CDN (no install)

<link rel="stylesheet"
      href="https://unpkg.com/roycss/dist/roycss.min.css" />

Spring physics · OKLCH · scroll-driven

RoyMotion

A tiny, modern CSS animation system built into RoyCSS. Spring easing tokens, entrance & exit animations, hover effects, loaders, skeletons, and microinteractions — all in one stylesheet, all respecting reduced-motion preferences.

prefers-reduced-motion: reduce is OFF

Entrance

Entrance Animations (10)

Click any tile to replay the animation.

Hover

Hover Effects (10)

roy-hover-lift

roy-hover-scale

roy-hover-press

roy-hover-glow

roy-hover-shake

roy-hover-pulse

roy-hover-bounce

roy-hover-tilt

roy-hover-underline

roy-hover-overlay

Hover the colored swatches to see each effect.

Loaders

Loading Animations (5)

Skeletons

Skeleton Loaders

.roy-skel-text.roy-skel-circle.roy-skel-rect.roy-skel-card

Micro

Microinteractions (5)

Tokens

Spring Easing Tokens

Click any chip to copy the CSS declaration. Use these tokens anywhere — they cascade from the :root block in roymotion.css.

Built on modern CSS — OKLCH color, color-mix(), logical properties, CSS Nesting, @property, and progressive-enhancement @supports for scroll-driven animations. Falls back gracefully when motion is reduced.

Documentation

Everything You Need to Know

Guides, tutorials, and references to help you ship faster.

Accessibility

WCAG 2.1 AA compliant. Every effect respects prefers-reduced-motion. Full keyboard navigation. ARIA-ready.

Reduced motion support
Focus-visible rings
Screen reader safe
High contrast mode

Performance

Zero JavaScript runtime. Pure CSS — no hydration cost, no bundle bloat. Tree-shakeable per-effect.

10KB initial CSS (lazy-loaded)
~1KB per effect on demand
Zero JS runtime
Tree-shakeable exports

Migration

Switch from Animate.css, Tailwind, or Bootstrap with our migration guides and codemods.

Animate.css → RoyCSS map
Tailwind integration
Bootstrap conversion
Automatic codemods

Dashboard Tutorial

Build a complete dashboard in 15 minutes using RoyCSS components and effects.

Grid + StatCards
Charts + Tables
Tabs + Progress
Copy-paste template

Changelog

Track every release — new effects, breaking changes, deprecations, and bug fixes.

v1.0 — 1,959+ effects launch
29+ categories
OKLCH color system
RoyMotion animation system

Roadmap

What's coming next — component library expansion, VS Code extension, AI-powered suggestions.

Component library (24→100+)
VS Code extension
CLI codemods
AI effect recommender

Animate.css → RoyCSS Migration

Drop-in replacements for 103 Animate.css classes. Same behavior, smaller bundle, no JS runtime.

Animate.css	→	RoyCSS	Type
`animate__bounceIn`	→	`roycss-anim-bounce-in`	Entrance
`animate__bounceInDown`	→	`roycss-anim-bounce-in-down`	Entrance
`animate__bounceInLeft`	→	`roycss-anim-bounce-in-left`	Entrance
`animate__bounceInRight`	→	`roycss-anim-bounce-in-right`	Entrance
`animate__bounceInUp`	→	`roycss-anim-bounce-in-up`	Entrance
`animate__fadeIn`	→	`roycss-anim-fade-in`	Entrance
`animate__fadeInDown`	→	`roycss-anim-fade-in-down`	Entrance
`animate__fadeInDownBig`	→	`roycss-anim-fade-in-down-big`	Entrance
`animate__fadeInLeft`	→	`roycss-anim-fade-in-left`	Entrance
`animate__fadeInLeftBig`	→	`roycss-anim-fade-in-left-big`	Entrance
`animate__fadeInRight`	→	`roycss-anim-fade-in-right`	Entrance
`animate__fadeInRightBig`	→	`roycss-anim-fade-in-right-big`	Entrance
`animate__fadeInUp`	→	`roycss-anim-fade-in-up`	Entrance
`animate__fadeInUpBig`	→	`roycss-anim-fade-in-up-big`	Entrance
`animate__fadeInTopLeft`	→	`roycss-anim-fade-in-top-left`	Entrance
`animate__fadeInTopRight`	→	`roycss-anim-fade-in-top-right`	Entrance
`animate__fadeInBottomLeft`	→	`roycss-anim-fade-in-bottom-left`	Entrance
`animate__fadeInBottomRight`	→	`roycss-anim-fade-in-bottom-right`	Entrance
`animate__slideInDown`	→	`roycss-anim-slide-in-down`	Entrance
`animate__slideInLeft`	→	`roycss-anim-slide-in-left`	Entrance
`animate__slideInRight`	→	`roycss-anim-slide-in-right`	Entrance
`animate__slideInUp`	→	`roycss-anim-slide-in-up`	Entrance
`animate__zoomIn`	→	`roycss-anim-zoom-in`	Entrance
`animate__zoomInDown`	→	`roycss-anim-zoom-in-down`	Entrance
`animate__zoomInLeft`	→	`roycss-anim-zoom-in-left`	Entrance
`animate__zoomInRight`	→	`roycss-anim-zoom-in-right`	Entrance
`animate__zoomInUp`	→	`roycss-anim-zoom-in-up`	Entrance
`animate__flipInX`	→	`roycss-anim-flip-in-x`	Entrance
`animate__flipInY`	→	`roycss-anim-flip-in-y`	Entrance
`animate__lightSpeedInLeft`	→	`roycss-anim-light-speed-in-left`	Entrance
`animate__lightSpeedInRight`	→	`roycss-anim-light-speed-in-right`	Entrance
`animate__rotateIn`	→	`roycss-anim-rotate-in`	Entrance
`animate__rotateInDownLeft`	→	`roycss-anim-rotate-in-down-left`	Entrance
`animate__rotateInDownRight`	→	`roycss-anim-rotate-in-down-right`	Entrance
`animate__rotateInUpLeft`	→	`roycss-anim-rotate-in-up-left`	Entrance
`animate__rotateInUpRight`	→	`roycss-anim-rotate-in-up-right`	Entrance
`animate__rollIn`	→	`roycss-anim-roll-in`	Entrance
`animate__backInDown`	→	`roycss-anim-back-in-down`	Entrance
`animate__backInLeft`	→	`roycss-anim-back-in-left`	Entrance
`animate__backInRight`	→	`roycss-anim-back-in-right`	Entrance
`animate__backInUp`	→	`roycss-anim-back-in-up`	Entrance
`animate__fadeOut`	→	`roycss-anim-fade-out`	Exit
`animate__fadeOutDown`	→	`roycss-anim-fade-out-down`	Exit
`animate__fadeOutDownBig`	→	`roycss-anim-fade-out-down-big`	Exit
`animate__fadeOutLeft`	→	`roycss-anim-fade-out-left`	Exit
`animate__fadeOutLeftBig`	→	`roycss-anim-fade-out-left-big`	Exit
`animate__fadeOutRight`	→	`roycss-anim-fade-out-right`	Exit
`animate__fadeOutRightBig`	→	`roycss-anim-fade-out-right-big`	Exit
`animate__fadeOutUp`	→	`roycss-anim-fade-out-up`	Exit
`animate__fadeOutUpBig`	→	`roycss-anim-fade-out-up-big`	Exit
`animate__fadeOutTopLeft`	→	`roycss-anim-fade-out-top-left`	Exit
`animate__fadeOutTopRight`	→	`roycss-anim-fade-out-top-right`	Exit
`animate__fadeOutBottomRight`	→	`roycss-anim-fade-out-bottom-right`	Exit
`animate__fadeOutBottomLeft`	→	`roycss-anim-fade-out-bottom-left`	Exit
`animate__slideOutDown`	→	`roycss-anim-slide-out-down`	Exit
`animate__slideOutLeft`	→	`roycss-anim-slide-out-left`	Exit
`animate__slideOutRight`	→	`roycss-anim-slide-out-right`	Exit
`animate__slideOutUp`	→	`roycss-anim-slide-out-up`	Exit
`animate__zoomOut`	→	`roycss-anim-zoom-out`	Exit
`animate__zoomOutDown`	→	`roycss-anim-zoom-out-down`	Exit
`animate__zoomOutLeft`	→	`roycss-anim-zoom-out-left`	Exit
`animate__zoomOutRight`	→	`roycss-anim-zoom-out-right`	Exit
`animate__zoomOutUp`	→	`roycss-anim-zoom-out-up`	Exit
`animate__bounceOut`	→	`roycss-anim-bounce-out`	Exit
`animate__bounceOutDown`	→	`roycss-anim-bounce-out-down`	Exit
`animate__bounceOutLeft`	→	`roycss-anim-bounce-out-left`	Exit
`animate__bounceOutRight`	→	`roycss-anim-bounce-out-right`	Exit
`animate__bounceOutUp`	→	`roycss-anim-bounce-out-up`	Exit
`animate__flipOutX`	→	`roycss-anim-flip-out-x`	Exit
`animate__flipOutY`	→	`roycss-anim-flip-out-y`	Exit
`animate__lightSpeedOutLeft`	→	`roycss-anim-light-speed-out-left`	Exit
`animate__lightSpeedOutRight`	→	`roycss-anim-light-speed-out-right`	Exit
`animate__rotateOut`	→	`roycss-anim-rotate-out`	Exit
`animate__rotateOutDownLeft`	→	`roycss-anim-rotate-out-down-left`	Exit
`animate__rotateOutDownRight`	→	`roycss-anim-rotate-out-down-right`	Exit
`animate__rotateOutUpLeft`	→	`roycss-anim-rotate-out-up-left`	Exit
`animate__rotateOutUpRight`	→	`roycss-anim-rotate-out-up-right`	Exit
`animate__rollOut`	→	`roycss-anim-roll-out`	Exit
`animate__backOutDown`	→	`roycss-anim-back-out-down`	Exit
`animate__backOutLeft`	→	`roycss-anim-back-out-left`	Exit
`animate__backOutRight`	→	`roycss-anim-back-out-right`	Exit
`animate__backOutUp`	→	`roycss-anim-back-out-up`	Exit
`animate__bounce`	→	`roycss-anim-bounce`	Attention
`animate__flash`	→	`roycss-anim-flash`	Attention
`animate__pulse`	→	`roycss-anim-pulse`	Attention
`animate__rubberBand`	→	`roycss-anim-rubber-band`	Attention
`animate__shakeX`	→	`roycss-anim-shake-x`	Attention
`animate__shakeY`	→	`roycss-anim-shake-y`	Attention
`animate__headShake`	→	`roycss-anim-head-shake`	Attention
`animate__swing`	→	`roycss-anim-swing`	Attention
`animate__tada`	→	`roycss-anim-tada`	Attention
`animate__wobble`	→	`roycss-anim-wobble`	Attention
`animate__jello`	→	`roycss-anim-jello`	Attention
`animate__heartBeat`	→	`roycss-anim-heartbeat`	Attention
`animate__infinite`	→	`roycss-loop-infinite`	Utility
`animate__delay-2s`	→	`roycss-delay-2s`	Utility
`animate__delay-3s`	→	`roycss-delay-3s`	Utility
`animate__delay-4s`	→	`roycss-delay-4s`	Utility
`animate__delay-5s`	→	`roycss-delay-5s`	Utility
`animate__slow`	→	`roycss-duration-slow`	Utility
`animate__slower`	→	`roycss-duration-slower`	Utility
`animate__fast`	→	`roycss-duration-fast`	Utility
`animate__faster`	→	`roycss-duration-faster`	Utility

Replace animate__ prefix with roycss-anim- — same animations, zero JavaScript, OKLCH colors, reduced-motion support built in.

Pricing

Simple, Transparent Pricing

From free to enterprise — there's a plan for every team.

Free

$0/mo

Everything you need to explore the full CSS library and start building.

All 1,749 CSS effects
13 open-source platform products
Community support
MIT License
No credit card required

Quick Answers

Can I change plans anytime?

Yes.

Can I cancel anytime?

Yes.

Do you offer student discounts?

Yes, 50% off Pro.

Do you offer open-source discounts?

Yes, free Pro for qualifying projects.

What is RoyCSS?

CSS-First

Component System

AI-Native

Developer Platform

From idea to production in four steps

Discover

Customize

Copy

Ship

Who is it for?

Developers

Designers

Teams

Enterprise

Featured Effects

Pulse Glow

3D Tilt Hover

Gradient Text

Aurora Waves Background

Dna

3D Rotate Card

Neon Button

Glassmorphism

Neon Pulse Border

Particles Confetti Burst

Advanced Visual Effects

Featured Effects

Pulse Glow

Bounce In

Fade In Up

Rotate Spin

Get Started

Install RoyCSS

Import the stylesheet

Add a class to any element

Use the RoyCSS CLI

Install the VS Code snippets

Connect AI assistants (MCP Server)

Explore by Category

Can't decide?

Popular Tags

Recommended for You

Search by CSS Property

All Effects

Pulse Glow

Bounce In

Fade In Up

Rotate Spin

Shake

Float

Jello

Heartbeat

Wobble

Tada

Swing

Head Shake

Rubber Band

Slide In Left

Slide In Right

Zoom In

Flip In X

Flip In Y

Light Speed In

Roll In

Jack In The Box

Bounce Out

Fade Out Down

Rotate Out

Ready to build something beautiful?

Curated effects, hand-picked weekly

Aurora Gradient Text

Pulse Glow

Lift & Glow

Glassmorphism

Gradient Glow Button

Breathing Orb

Aurora Gradient Text

RoyMotion

Entrance Animations (10)