REIS IA MOVIMENTO E ANIMAÇÃO DESIGN SYSTEM v1.0

Sistema de Movimento

Toda animação é intencional. Sem ease padrão. Sem durações arbitrárias. Lento é premium — rápido parece barato. O sistema de movimento é engenhado com a mesma precisão dos sistemas de IA que construímos.

[01] Princípios de Movimento

Lento É Premium

Transições rápidas parecem utilitárias. Animações mais lentas e pesadas comunicam luxo e confiança. 800ms para entradas, 500ms para interações de cards — mais lento que a maioria dos sites tech.

Linear: 300ms | Apple: 500ms | Reis IA: 800ms

Física Acima da Matemática

Curvas cubic-bezier customizadas criam movimento natural. Elementos desaceleram até a posição (ease-out) e aceleram ao sair da tela (ease-in), imitando objetos físicos com massa.

5 engineered curves, no CSS defaults

Contenção no Movimento

Nem tudo se move. Elementos estáticos criam contraste que torna elementos animados mais impactantes. Distâncias de translate: máx. 24px. Rotações: máx. 8deg.

No bounce, no elastic, no overshoot

[02] Curvas de Easing

5 curves for different animation contexts. Each cell shows a visual bezier canvas and an animated ball on a track. Click any cell to replay the animation.

Ease Base--ease-base

cubic-bezier(0.25, 0.1, 0.25, 1)

Default for most transitions. Nearly identical to CSS ease but engineered.

click to replay

Ease Out--ease-out

cubic-bezier(0.16, 1, 0.3, 1)

Elements appearing, scroll reveals. Fast start, gentle deceleration.

click to replay

Ease In--ease-in

cubic-bezier(0.4, 0, 0.5, 1)

Elements exiting view. Quick acceleration, gentle landing.

click to replay

Ease Dramatic--ease-dramatic

cubic-bezier(0.65, 0, 0.35, 1)

Entradas hero, revelações de seções principais. Curva S simétrica.

click to replay

Ease Card--ease-card

cubic-bezier(0.7, 0, 0, 1)

Card hover scale + shadow. Heavy, weighted feel.

click to replay

Easing CSS Variables

:root {
  --ease-base:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 0.5, 1);
  --ease-dramatic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-card:     cubic-bezier(0.7, 0, 0, 1);
}

[03] Tokens de Duração

7 duration tiers, each roughly 1.5-2x the previous. The ambient tier (13s) is for continuous effects only. Click each row to see the timing in real time.

Instant100ms

Opacity micro-hintsclick to replay

Fast200ms

Hover color changes, border transitionsclick to replay

Normal300ms

Standard transitions, card hoverclick to replay

Moderate500ms

Card scale + shadow, complexclick to replay

Slow800ms

Scroll-triggered entrancesclick to replay

Dramatic1200ms

Hero entrance, 3D perspectiveclick to replay

Ambient13000ms

Continuous ambient effectsclick to replay

Duration CSS Variables

:root {
  --duration-instant:   100ms;
  --duration-fast:      200ms;
  --duration-normal:    300ms;
  --duration-moderate:  500ms;
  --duration-slow:      800ms;
  --duration-dramatic:  1200ms;
  --duration-ambient:   13000ms;
}

[04] Animações de Entrada

4 entrance types for different contexts. Fade Up is the primary entrance used on most elements. 3D Perspective is reserved for hero sections only. Click each cell to replay.

01Fade Up

800ms

Primary entrance. translateY(24px) + opacity.translateY(24px) + opacity

click to replay

02Fade In

800ms

Opacity only. For subtle reveals without movement.opacity only

click to replay

03Scale Reveal

800ms

scale(0.96) + opacity. For images and visuals.scale(0.96) + opacity

click to replay

043D Perspective

1200ms

translateY(80px) rotateX(8deg). Hero sections only.translateY(80px) rotateX(8deg)

click to replay

Entrance Animation CSS

/* Primary entrance: Fade Up */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In (opacity only) */
.animate-fade-in {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.animate-fade-in.is-visible { opacity: 1; }

/* Scale Reveal (images/visuals) */
.animate-scale-reveal {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.animate-scale-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 3D Perspective (hero only) */
.animate-perspective-parent { perspective: 1200px; }
.animate-perspective-up {
  opacity: 0;
  transform: translateY(80px) rotateX(8deg);
  transform-origin: bottom center;
  transition: all var(--duration-dramatic) var(--ease-dramatic);
}
.animate-perspective-up.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

[05] Entrada Stagger em Grid

Cards in a grid appear with cascading delays. Configure the stagger delay (50-300ms per item), animation duration (200-1500ms), and item count to see how different settings feel. The stagger creates a wave effect that guides the eye left-to-right, top-to-bottom.

Delay100ms

Duration800ms

Items

Total cascade: 500msLast item completes: 1300ms

01

Builder

Direct services

delay: 0ms

02

Systems

AI implementation

delay: 100ms

03

Partners

Agency partners

delay: 200ms

04

Network

Community

delay: 300ms

05

Academy

Education

delay: 400ms

06

Labs

R&D

delay: 500ms

Stagger CSS + JS

/* Grid stagger (configurable per-item delay) */
.grid-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.grid-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.grid-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.grid-stagger.in-view > *:nth-child(2) { transition-delay: 100ms; }
.grid-stagger.in-view > *:nth-child(3) { transition-delay: 200ms; }
.grid-stagger.in-view > *:nth-child(4) { transition-delay: 300ms; }
.grid-stagger.in-view > *:nth-child(5) { transition-delay: 400ms; }
.grid-stagger.in-view > *:nth-child(6) { transition-delay: 500ms; }

[06] Animações de Hover em Cards

Three card hover tiers. Standard uses 300ms ease-base. Featured adds blue glow at 500ms with the weighted ease-card. Image cards scale the inner image at 1.03x. Hover each to interact.

01 Standard Hover

Standard Border + bg shift. 300ms ease-base.

hover me

02 Featured Hover

Featured Blue glow + accent border. 500ms ease-card.

hover me

03 Image Hover

Image Card scale(1.03) on image. 500ms ease-card.

hover me

Card Hover CSS

/* Standard card hover */
.card {
  transition: border-color 300ms var(--ease-base),
              background-color 300ms var(--ease-base);
}
.card:hover {
  border-color: var(--border-visible);
  background-color: var(--surface-3);
}

/* Featured card hover (blue glow) */
.card-featured:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-blue-glow);
  transition: all 500ms var(--ease-card);
}

/* Image hover (scale inner image) */
.card-image img {
  transition: transform 500ms var(--ease-card);
}
.card-image:hover img {
  transform: scale(1.03);
}

[07] Simulação de Scroll Reveal

A simulated scroll container demonstrating IntersectionObserver-triggered reveals. Scroll down within the container to see items fade in as they enter the viewport. Uses the same fade-up entrance at 800ms with ease-out.

Scroll down inside the container to see items reveal

01Hero Section

First element visible immediately. No delay needed.

waiting for scroll

02About Section

Fades up as user scrolls down. 800ms with ease-out.

waiting for scroll

03Features Grid

Four cards appear with 100ms stagger between each.

waiting for scroll

04Testimonial

Scale reveal for the quote card. 0.96 to 1.0.

waiting for scroll

05CTA Section

Final section with blue ambient pool behind the button.

waiting for scroll

06Footer

Subtle fade-in. The last element on the page.

waiting for scroll

[08] Animações Ambientes

Continuous animations that run in the background. The rotating border (8s) and aurora effect (20s) create ambient movement without demanding attention. These use transform and opacity only for GPU compositing.

01 Rotating Border

8s Cycle Blue beam sweeps ~15% of perimeter. Linear infinite.

animation: rotate-border 8s linear infinite

02 Aurora Ambient

20s Cycle Gradient orbs drift slowly. ease-in-out infinite alternate.

animation: aurora-shift 20s ease-in-out infinite alternate

[09] Movimento Reduzido

When prefers-reduced-motion: reduce is active, all animations and transitions collapse to near-instant (0.01ms). This is a global rule with no exceptions. Content and functionality remain identical; only motion is removed.

Default (Motion On)

Scroll-triggered fade-up at 800ms
Card hover transitions at 200-500ms
Rotating border at 8s continuous
Aurora background at 20s drift
Stagger delays: 100-150ms per item

Reduced Motion

All elements visible immediately (no fade)
Hover states change instantly (0.01ms)
Rotating border: single frame (no spin)
Aurora: static gradient (no drift)
No stagger delays

Reduced Motion CSS

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[10] Micro-Interações de Hover

Element

Effect

Duration

Easing

Primary CTA

Background darken + translateY(-2px)

200ms

ease-base

Secondary Button

Border brightens + subtle bg tint

200ms

ease-base

Ghost Button

Text to white + arrow translateX(4px)

200ms

ease-base

Standard Card

Border visible + bg one tier up

300ms

ease-base

Featured Card

Border accent + blue glow shadow

500ms

ease-card

Nav Link

Text color to white

150ms

ease-base

Image in Card

scale(1.03) with overflow:hidden

500ms

ease-card

[11] Regras de Uso

Use --ease-out for elements entering the viewport
Use --ease-base for hover/focus state transitions
Keep translate distances under 24px for standard entrances
Respect prefers-reduced-motion in all animations
Use stagger delays (100-150ms) when multiple siblings enter together

Don't

Use CSS default ease or linear for UI transitions
Animate transforms on elements that trigger layout recalculation
Use 3D perspective entrance outside of hero sections
Create stagger chains longer than 6 items (cap at 600ms total)
Use bounce or elastic easing -- too playful for the brand