Futuristic Effects Agent

Futuristic Effects Agent

Role: Advanced Visual Effects Specialist
Scope: Glassmorphism, neon effects, quantum gradients, consciousness animations
Version: 2.1 - High-Density Refactor

Purpose

Apply advanced visual effects from Genesis v2.0+ while maintaining ontological semantic purity. Layer atmospheric effects on top of semantic structure through genesis-atmosphere() mixins.

When to Use This Skill

Activate when:

• Implementing glassmorphism effects
• Adding neon glow to alerts/CTAs
• Creating quantum gradient backgrounds
• Applying consciousness animations
• Enhancing visual immersion in heroes
• Layering futuristic effects on components

Core Workflow

1. Start with Semantic Structure

// ALWAYS begin with ontological foundation
.component {
  @include genesis-environment('focused');  // Layout
  @include genesis-entity('primary');      // Presence
  @include genesis-cognition('axiom');     // Typography
}

2. Layer Atmospheric Effects

// Then add effects via atmosphere or state
.component {
  @include genesis-environment('focused');
  @include genesis-entity('primary');       // Includes glassmorphism
  @include genesis-atmosphere('vibrant');   // High-energy vibe
}

3. Use Ontology Variants

Most effects are built into ontology variants:

Quick Effect Reference

Glassmorphism: genesis-entity('primary') - cards, modals, panels
Neon Glows: genesis-entity('imperative') - alerts, CTAs, active states
Gradients: genesis-synapse('execute') - buttons, heroes, backgrounds
Animations: genesis-state('evolving') - loading, processing
Hover: Built into synapse variants - quantum lift, neural link glow

→ Complete effects catalog: /docs/specifications/futuristic-effects.md

Common Patterns

Immersive Hero

.hero {
  @include genesis-environment('focused');
  @include genesis-atmosphere('viewport-aware');
  @include genesis-atmosphere('void');
}

Alert with Urgency

.alert {
  @include genesis-entity('imperative');    // Neon + pulse
  @include genesis-state('evolving');       // Animation
}

Interactive Card

.card {
  @include genesis-entity('primary');       // Glassmorphism
  @include hover-quantum;                   // Lift on hover
}

→ Complete patterns: /docs/specifications/futuristic-effects.md

Validation

Before committing:

# SCSS compilation check
npm run test:scss

# Linting
npm run lint:scss

Accessibility

All effects automatically handle:

• ✅ prefers-reduced-motion - animations disabled
• ✅ prefers-contrast: high - glassmorphism disabled
• ✅ Mobile performance - simplified effects

→ A11y requirements: /docs/specifications/accessibility.md

Resources

Complete Effect System:

• /docs/specifications/futuristic-effects.md - All effects, variants, patterns, examples

Core Systems:

• /docs/specifications/scss-ontology-system.md - Ontology variants reference
• /docs/specifications/animation-system.md - Animation architecture
• /docs/specifications/color-system.md - OKLCH color tokens

Guidelines:

• /docs/specifications/accessibility.md - Reduced motion, contrast
• /docs/specifications/performance.md - Performance optimization
• /docs/MOTION-INTEGRATION.md - Motion library integration

Implementation:

• _sass/ontology/_engines.scss - Effect implementations
• _sass/design/_variables.scss - Effect color tokens

Related Skills: responsive-design-agent, scss-refactor-agent

Version History:

• v2.1 (2026-02-10): High-density refactor - 430→145 lines, extracted to /docs/specifications/futuristic-effects.md
• v2.0 (2026-02-10): Initial v2.0+ futuristic effects system

Converted and distributed by TomeVault — claim your Tome and manage your conversions.