FerrumEngine — The Universal UI Platform

FerrumEngine is the universal UI platform that unifies motion, VFX, components, design tokens, and compiler optimization into one coherent system. With 542 production-ready CSS effects across 35 categories, 9 framework adapters (React, Vue, Svelte, Angular, Solid, Lit, Astro, Next.js), and zero runtime dependencies, FerrumEngine is the production-grade choice for modern web UI.

  • Browse all 542 effects
  • Try the interactive playground
  • Read the documentation
  • Understand the design principles
  • Explore the platform architecture
  • Learning center and tutorials
  • Enterprise features
  • Showcase gallery
  • Vision and manifesto
  • Why Ferrum exists

Effects Library

Browse 542 production-ready CSS motion effects across 35 categories including:

  • 3D — 10 effects
  • Attention — 19 effects
  • Background — 25 effects
  • Blend Modes — 2 effects
  • Borders — 15 effects
  • Buttons — 25 effects
  • Cards — 24 effects
  • Clip Path — 2 effects

Featured Effects

  • 3D Book (roycss-3d-book) — 3d category, box display type
  • 3D Gallery (roycss-3d-gallery) — 3d category, box display type
  • 3D Poster (roycss-3d-poster) — 3d category, box display type
  • Accordion 3D (roycss-accordion-3d) — 3d category, box display type
  • Cube Face (roycss-cube-face) — 3d category, box display type
  • Cube Rotate (roycss-cube-rotate) — 3d category, box display type
  • Perspective Tilt (roycss-perspective-tilt) — 3d category, box display type
  • Rotate 3D (roycss-rotate-3d) — 3d category, box display type
  • Scale 3D (roycss-scale-3d) — 3d category, box display type
  • Skew 3D (roycss-skew-3d) — 3d category, box display type
  • Bounce Rotate (roycss-bounce-rotate) — attention category, box display type
  • Breathe (roycss-breathe) — attention category, box display type

Platform Capabilities

  • Motion Library: Entrance, hover, attention, loading, exit, and text animations with zero JavaScript runtime.
  • Visual Effects (VFX): Glass morphism, neon borders, gradient meshes, ripple effects, skeletons, and Houdini Paint API worklets.
  • Design Tokens: A single source of truth for colors, spacing, typography, motion, elevation, radius, breakpoints, z-index, and opacity — with transforms for CSS, SCSS, Tailwind, TypeScript, and JSON.
  • UI Compiler: A 9-pass optimization pipeline that analyzes intent, resolves tokens, eliminates dead code, and produces minimal output bundles.
  • Framework Adapters: First-class support for React, Vue, Svelte, Angular, Solid, Lit, Astro, and Next.js — same API, same effects, same performance.
  • Cloud Platform: Team collaboration, design token management, version control, and audit logs with secure authentication.

Getting Started

Install FerrumEngine via npm, pnpm, or yarn. Import the CSS bundle, add the className to any element, and ship. No build step required for basic usage. For advanced use cases, use the CLI or framework adapter for tree-shaking and token customization.

Why FerrumEngine?

Most animation libraries force you to choose: rich effects OR small bundle size OR framework lock-in. FerrumEngine breaks this trade-off. The core runtime is under 2KB gzipped. Effects are pure CSS — they work in any framework, any browser, any build setup. The compiler ensures you ship only the effects you actually use.

Performance

Zero runtime dependencies. The entire motion library is pure CSS — no JavaScript animation engine, no requestAnimationFrame loops, no layout thrashing. Effects are GPU-accelerated where possible and respect prefers-reduced-motion by default.