REIS IA VFX DESIGN SYSTEM v1.0

VFX System

Advanced visual effects that add atmospheric depth and interactive delight. Each effect is CSS-first where possible, with JavaScript only when interaction or scroll-linking requires it. Performance is non-negotiable -- all effects must maintain 60fps.

[01] Aurora Background

Slow-moving gradient orbs create an ethereal atmospheric backdrop. Configure the orb count (1-3), cycle speed (10-40s), and play/pause to explore different configurations. Used behind hero sections for ambient depth.

Duration: 20s default Usage: Hero sections only Performance: GPU-composited

Orbs

Speed20s

Aurora Background

3 gradient orbs slowly drift and scale at a 20s cycle, creating atmospheric depth behind hero sections.

GPU-composited (transform + opacity only)

Aurora CSS

.aurora-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%,
      rgba(74, 144, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%,
      rgba(141, 196, 255, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 80%,
      rgba(53, 112, 204, 0.06) 0%, transparent 60%);
  animation: aurora-shift 20s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes aurora-shift {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  33%  { transform: translate(-5%, 3%) scale(1.05); opacity: 0.8; }
  66%  { transform: translate(3%, -2%) scale(0.98); opacity: 1; }
  100% { transform: translate(-2%, 5%) scale(1.02); opacity: 0.9; }
}

[02] Mesh Gradient

Multi-stop radial gradients overlaid to create organic, flowing background patterns. Static (no animation), used for section backgrounds where aurora would be too much motion. Four gradient points at different positions create natural depth variation.

Type: Static (CSS only) Usage: Section backgrounds Points: 4 radial-gradient stops

Mesh Gradient

Four overlapping radial gradients create an organic, flowing background. Each gradient uses a different blue shade and position for natural depth variation.

at 40% 20% (7%)

at 80% 0% (5%)

at 0% 50% (4%)

at 60% 100% (6%)

Mesh Gradient CSS

.mesh-gradient {
  background:
    radial-gradient(at 40% 20%,
      rgba(74, 144, 255, 0.07) 0%, transparent 50%),
    radial-gradient(at 80% 0%,
      rgba(53, 112, 204, 0.05) 0%, transparent 50%),
    radial-gradient(at 0% 50%,
      rgba(141, 196, 255, 0.04) 0%, transparent 50%),
    radial-gradient(at 60% 100%,
      rgba(74, 144, 255, 0.06) 0%, transparent 50%),
    var(--surface-0);
}

[03] Section Transitions

Gradient fade overlays create smooth visual transitions between sections with different background tiers. The 120px fade height matches the maximum value of --space-3xl, creating seamless blending.

Height: 80-120px Type: CSS only (pseudo-element)

Section A -- Surface-0

Content on the void background.

Section B -- Surface-1

The gradient creates a smooth visual transition between the two surface tiers, avoiding a hard edge.

Section C -- Surface-0

Back to void. The cycle continues.

Section Transition CSS

.section-transition-bottom {
  position: relative;
}

.section-transition-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--surface-next)
  );
  pointer-events: none;
}

[04] Text Reveal

Words transition from 20% opacity to 100% with staggered delays, creating a reading-pace reveal. Each word gets 60ms delay offset, so a 15-word sentence completes in under 1 second. Click "Replay" to see the effect again.

Delay per word: 60ms Word transition: 800ms ease-out Usage: Manifesto-style hero text

Artificialintelligenceisnotatool—itisastrategicmultiplierthattransformshowbusinessescreatevalue

Text Reveal CSS

/* Each word wrapped in a span */
.text-reveal-word {
  display: inline-block;
  color: var(--text-muted);
  transition: color 800ms var(--ease-out);
  transition-delay: calc(var(--word-index) * 60ms);
}

.text-reveal.in-view .text-reveal-word {
  color: var(--text-primary);
}

[05] Counter Animation

Numbers animate from 0 to their target value when the stats section enters the viewport. Uses requestAnimationFrame for smooth 60fps updates with an ease-out deceleration curve. Click "Replay" to see the count-up animation.

Duration: 2000ms Easing: Cubic ease-out Supports: %, +, x suffixes

Client Retention

AI Implementations

Average ROI

Counter JS

function animateCounter(element, target, suffix = '') {
  const duration = 2000;
  const start = performance.now();

  function update(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3);
    const current = Math.round(target * eased);
    element.textContent = current + suffix;
    if (progress < 1) requestAnimationFrame(update);
  }

  requestAnimationFrame(update);
}

[06] Magnetic Hover

Elements subtly follow cursor position within their bounds, creating an interactive magnetic feel. Max offset: 8px in any direction (restrained compared to Stripe's 12px). Move your cursor over the button to see the effect.

Max offset: 8px Transition: 300ms ease-out Usage: Hero CTA buttons only Touch: Disabled

Move your cursor over the button to see the magnetic pull effect (max 8px offset).

transition: transform 300ms var(--ease-out)

Magnetic Hover JS

function initMagneticHover(element) {
  const maxOffset = 8;

  element.addEventListener('mousemove', (e) => {
    const rect = element.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    const offsetX = Math.max(-maxOffset,
      Math.min(maxOffset, x * 0.15));
    const offsetY = Math.max(-maxOffset,
      Math.min(maxOffset, y * 0.15));
    element.style.transform =
      `translate(${offsetX}px, ${offsetY}px)`;
  });

  element.addEventListener('mouseleave', () => {
    element.style.transform = 'translate(0, 0)';
  });
}

.magnetic-hover {
  transition: transform 300ms var(--ease-out);
}

[07] Gradient Border Glow

The background-clip gradient border technique creates a blue sweep effect around cards. On hover, a configurable blue glow shadow appears. Adjust the intensity slíder and hover the gradient border card to see the effect.

Technique: background-clip: padding-box / border-box Hover: box-shadow glow at 500ms ease-card

Glow Intensity12%

01Gradient Border

Gradient Border

background-clip technique with blue sweep. Hover for glow effect at 12% intensity.

hover me

02Static Glow

Persistent Glow

border-accent + box-shadow glow. Always visible, no hover required.

always on

Gradient Border CSS

.card-gradient-border {
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface-3)) padding-box,
    linear-gradient(90deg,
      rgba(74,144,255,0.4) 0%,
      rgba(74,144,255,0) 50%,
      rgba(74,144,255,0.4) 100%
    ) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
}

/* Hover glow */
.card-gradient-border:hover {
  box-shadow: 0 0 50px rgba(74, 144, 255, 0.12);
}

[08] Parallax Layers

Background elements move at different speeds during scroll, creating depth. Three speed tiers: slow (-0.05), medium (-0.10), and fast (-0.15). Scroll within the container to see the layers separate.

Requires: JS scroll listener Performance: transform only (GPU) Applied to: Decorative elements only

Scroll within the container below to see three layers moving at different speeds.

IA

parallax-fast (-0.15)

Foreground Content

This content moves fastest relative to scroll. Background elements (orbs, watermarks) move slower, creating depth perception.

Keep Scrolling

Notice how the gradient orbs and "IA" watermark lag behind.

Slow: -0.05Medium: -0.10Fast: -0.15

Parallax CSS + JS

/* CSS parallax layers */
.parallax-slow   { transform: translateY(calc(var(--scroll-y) * -0.05)); }
.parallax-medium { transform: translateY(calc(var(--scroll-y) * -0.1)); }
.parallax-fast   { transform: translateY(calc(var(--scroll-y) * -0.15)); }

/* JS: update scroll variable */
window.addEventListener('scroll', () => {
  document.documentElement.style.setProperty(
    '--scroll-y',
    window.scrollY + 'px'
  );
}, { passive: true });

[09] Ampulheta H1-B — Interacoes

Efeitos visuais aplicados a ampulheta H1-B — a marca visual do ecossistema Reis IA. Cada efeito usa a geometria SVG da ampulheta (viewBox 64x64) e respeita a regra de nao rotacionar ou flipar o símbolo fora de contextos de loading.

Símbolo: H1-B Hourglass Origem: hourglass-vfx-preview.html Efeitos: 6 variacoes

Hover Glow Pulsante

Passe o mouse sobre o ícone

hover: box-shadow pulse

Watermark Breathing

Conteúdo por cima

8s · scale(1.02) · opacity 4-5%

Construcao Linha a Linha

350ms por linha · stagger 200ms

Aurora Temporal

Orbs flutuantes · 20-25s · blur(40px)

Scanner Line

6s · linear · varredura vertical

Easter Egg — 7 Cliques

0/7

Clique 7x para ativar

[10] Z7 Loading Animations

Animacoes de loading usando a ampulheta H1-B. 7 variacoes de rotacao para diferentes contextos de carregamento. Cada variacao respeita o easing do design system.

Geometria: viewBox 64x64 Origem: z7-loading-animations-preview.html Variacoes: 7 rotacoes

Rotacao 360

2s linear

Flip 180

3s ease-in-out

Easing Spring

2.5s spring

Pendulo

2s alternate

Pulse + Spin

2s pulse

Rotacao 3D

3s 3D

[11] Tipografia Cinetica — "O Tempo é Rei"

Tratamento tipografico animado da frase central da marca. Cada palavra revela com stagger, e "Rei" recebe destaque em azul para reforcar o duplo significado.

Origem: branding-elements-preview.html Uso: Hero sections, intro de video

O Tempo e Rei

[12] Compressão 7:7 — Demonstracao Visual

Representacao visual da compressão temporal Z7: 7 horas com IA = 7 anos de aprendizado convencional. A barra comprime visualmente para demonstrar o conceito.

Aprendizado Convencional 7 anos

Com IA (Z7) 7 horas

Compressão 7:7

[13] Constelacao Operacional (Systems)

Visualização do sistema multiagente como constelação: nós interconectados representam agentes, linhas pulsantes mostram comunicação ativa. Cada nó tem função específica dentro da operação.

Origem: systems-vfx-preview.html Uso: Seção Systems na home, página de serviços

[14] Performance Notes

GPU-Composited (Safe)

transform -- translate, scale, rotate
opacity -- fade effects
filter -- blur, saturate
background-position -- gradient shifts

Layout-Triggering (Avoid)

width / height -- triggers reflow
margin / padding -- triggers reflow
top / left -- triggers reflow
font-size -- triggers reflow + repaint

Scroll Listener Best Practices

Always use passive: true on scroll event listeners
Throttle with requestAnimationFrame, not setInterval
Prefer IntersectionObserver over scroll position checks
Use will-change: transform on animated elements (remove after animation)

[15] Regras de Uso

Use aurora only on hero sections -- one per page
Animate only transform and opacity for 60fps
Use IntersectionObserver instead of scroll position checks
Disable magnetic hover on touch devices via @media (hover: hover)
Use passive: true on all scroll event listeners

Don't

Apply parallax to content elements -- decorative only
Use counter animation for numbers below 10 (not impactful)
Combine aurora + mesh gradient on the same section
Use text reveal on body paragraphs -- headlines only
Animate width, height, margin, or padding (causes layout thrash)