REIS IA
REIS IA EFEITOS DESIGN SYSTEM v1.0

Biblioteca de Efeitos

Cinco efeitos assinatura criam a identidade visual Reis IA. Cada um é uma síntese única, não uma cópia direta de qualquer referência. Use-os com contenção — os efeitos são poderosos precisamente porque são raros.

[01] Sapphire Scanner

Uma borda de gradiente cônico rotativo onde um segmento de luz azul orbita lentamente o perímetro do card. O feixe estreito (~15% do círculo) cria um efeito de escaneamento que evoca precisão sistemática. Ajuste o controle de velocidade para ver como diferentes velocidades de rotação se comportam.

Velocidade: 2-16s (padrão 8s) Uso: máx. 1-2 cards destaque por página Easing: linear infinite
Speed8s
01Sapphire Scanner
8s cycle

Featured Card

Blue beam sweeps ~15% of the perimeter.

active
02Standard Card

Standard Card

Static 8% white border for comparison.

comparison
Sapphire Scanner CSS
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card-rotating-border {
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface-3)) padding-box,
    conic-gradient(
      from var(--border-angle),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.08) 75%,
      rgba(74,144,255,0.5) 85%,
      rgba(74,144,255,0.8) 90%,
      rgba(74,144,255,0.5) 95%,
      rgba(255,255,255,0.08) 100%
    ) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  animation: rotate-border 8s linear infinite;
}

@keyframes rotate-border {
  to { --border-angle: 360deg; }
}
[02] Cool Ambient Pools

Pools de luz com gradiente radial sutil posicionados nos cantos das seções. Alterne entre pools com tons de azul e neutros, e escolha a posição do canto para ver como o padrão de alternância funciona entre seções.

Pool azul: rgba(74, 144, 255, 0.06) Pool neutro: rgba(255, 255, 255, 0.03) Padrão: Alternar cantos por seção
TypeCorner
Blue Pool -- TL Corner

Blue-tinted pools at rgba(74, 144, 255, 0.06) appear on key sections (hero, CTA). The blue depth creates a precision feel.

Alternating section -- opposite corner, opposite type

Corner positions alternate section-by-section to create visual rhythm across the page.
Ambient Pool CSS
/* Blue ambient pool (hero/CTA sections) */
.section-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    rgba(74, 144, 255, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Neutral pool (secondary sections) */
.section-alt::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 50%;
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 70%
  );
  pointer-events: none;
}
Section 1 (Hero) Blue ambient Centered on headline
Section 2 Neutral pool Bottom-left corner
Section 3 Neutral pool Top-right corner
Section 4 (CTA) Blue ambient Centered on CTA
Section 5 Neutral pool Bottom-right corner
Pattern Continue alternating Rotate corners clockwise
[03] H1-B Hourglass Watermarks

A marca da ampulheta H1-B "Open Intersection" posicionada como marca d'água de fundo em 3-5% de opacidade. A marca consiste em 5 linhas baseadas em traço: duas barras horizontais mais duas diagonais cruzadas com uma abertura no centro. Ajuste o controle de opacidade e posicionamento para visualizar diferentes configurações.

Tamanho: 200-300px Opacidade: 3-5% (0.03-0.05) Posição: absolute, pointer-events: none
Placement
Opacity4%

Content sits above the watermark

The H1-B Hourglass "Open Intersection" mark at 4% opacity is felt but never competes with readability. The open gap at center distinguishes it from a simple X or bowtie shape.

Card on watermarked surface

Cards with opaque backgrounds naturally occlude the watermark beneath them.

opacity: 0.04 | pointer-events: none
Recommended: 3-5%
Watermark CSS
.section-watermark {
  position: relative;
  overflow: hidden;
}

.section-watermark .watermark {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 200px;
  height: 280px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

/* H1-B "Open Intersection" SVG: stroke-based lines */
/* 2 horizontal bars + 2 crossing diagonals with open gap at center */

/* Hide on mobile to reduce visual noise */
@media (max-width: 767px) {
  .section-watermark .watermark {
    display: none;
  }
}
[04] Surface Depth Harmony

O sistema de superfícies de 5 níveis combinado com bordas white-alpha e pools ambientes cria percepção de profundidade física sem sombras. Esta é a técnica visual fundamental — todos os outros efeitos se sobrepõem a esta estrutura.

S-0 Void
Page background
S-1 Base
Alt sections
S-2 Raised
Cards
S-3 Elevated
Hover/inputs
S-4 Float
Dropdowns

Cada nível se estreita visualmente, representando proximidade com o observador. Mais perto = mais claro = menor área.

[05] Grain / Noise Texture

Uma textura de ruído sutil gerada por SVG sobreposta nas seções. Use o controle de opacidade (0-25%) para ver como diferentes intensidades se comportam. O intervalo recomendado é 2-4% — o suficiente para sentir a textura em superfícies escuras grandes sem percebê-la conscientemente.

Opacidade: 2-4% (padrão 3%) Técnica: SVG feTurbulence (sem arquivo externo) z-index: 1 (above bg, below content)
Opacity3%
opacity: 0.03
With Grain

SVG feTurbulence noise adds analog texture to the flat dark background. Prevents the digital void feel.

Card on grained surface
Without Grain

Pure flat black. Compare with the left side to see the texture difference at the current opacity level.

Card on flat surface
Recommended: 2-4%
Grain Overlay CSS
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  z-index: 1;
}
[06] Glassmorphism

Efeitos de backdrop-filter com blur e saturação para navegação, cards de vidro e overlays. O boost de saturate(180%) evita que o blur desbote o conteúdo subjacente.

Navigation (scrolled)
blur(20px) saturate(180%)
Glass Card
blur(16px) saturate(180%)
Mobile Menu Overlay
blur(24px) none
Stats Overlay
blur(12px) none
Glassmorphism CSS
/* Navigation (scrolled) */
.nav-scrolled {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
}

/* Glass card */
.card-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(180%);
}

/* Mobile menu overlay */
.menu-overlay {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
}
[07] Regras de Uso
Do
  • Usar Sapphire Scanner em máx. 1-2 cards destaque por página
  • Alternar posições dos ambient pools entre seções
  • Manter opacidade do grain em 2-4% — sutil, não visível
  • Esconder motivos de marca d'água em telas mobile
  • Limitar elementos de glow azul a máx. 2 por viewport
Don't
  • Aplicar borda rotativa em todo card — dilui o efeito
  • Empilhar múltiplos ambient pools no mesmo canto
  • Usar grain acima de 5% de opacidade — se torna distrativo
  • Posicionar marcas d'água onde interferem na legibilidade do texto
  • Combinar glassmorphism com grain no mesmo elemento
See Also
MotionVFXPatterns