Docs

Animations

Assignable element animations — presets an end user (via a site builder) can apply to ANY element, generated from one preset table so the three trigger class families always stay in sync: .sui-animate-{preset} — ON LOAD: a @keyframes animation that plays automatically on paint.

On Load — replays on remount

fade-in
slide-up
slide-down
slide-left
slide-right
scale-in
zoom-in

On Scroll — [data-sui-inview] toggled by hand here

fade-in
slide-up
slide-down
slide-left
slide-right
scale-in
zoom-in

Hover

lift
scale
glow

Speed / delay — slide-up preset

fast
normal
slow
delay 2

Using Animations

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class sui-animate-fade-in, with 22 modifiers:

  • .sui-animate-fade-in
  • .sui-animate-scale-in
  • .sui-animate-slide-down
  • .sui-animate-slide-left
  • .sui-animate-slide-right
  • .sui-animate-slide-up
  • .sui-animate-zoom-in
  • .sui-delay-1
  • .sui-delay-2
  • .sui-delay-3
  • .sui-duration-fast
  • .sui-duration-normal
  • .sui-duration-slow
  • .sui-hover-glow
  • .sui-hover-lift
  • .sui-hover-scale
  • .sui-reveal-fade-in
  • .sui-reveal-scale-in
  • .sui-reveal-slide-down
  • .sui-reveal-slide-left
  • .sui-reveal-slide-right
  • .sui-reveal-slide-up
  • .sui-reveal-zoom-in

The full API for Animations, on every path, is available through the Silica MCP server.