Skip to content

ALCHEMY_THEME.md

Latest commit

 

History

History
171 lines (136 loc) · 5.58 KB

ALCHEMY_THEME.md

File metadata and controls

171 lines (136 loc) · 5.58 KB
Raw

🦉 Eulixir Alchemy Theme Integration

This document describes the comprehensive alchemy theme integration throughout the Eulixir platform, featuring our wise owl mascot and mystical laboratory aesthetic.

🎨 Theme Components

1. AlchemyBackground (/src/components/AlchemyBackground.tsx)

Creates subtle floating background animations with beakers, test tubes, and owl mascots.

Features:

  • Density Controls: Light, Medium, Heavy floating element counts
  • Theme Variants: Owl-focused, Beaker-focused, or Mixed
  • Safe Positioning: Elements positioned in corners and edges to avoid content overlap
  • Smooth Animations: 15-25 second floating cycles with gentle movement
  • Adaptive Opacity: 0.15-0.3 opacity for subtle, non-intrusive effect

Available Presets:

<DashboardBackground />    // Light mixed theme
<VaultBackground />        // Medium beaker focus
<SwapBackground />         // Light owl focus  
<PositionsBackground />    // Medium mixed
<PipelineBackground />     // Heavy beaker focus

2. OwlMascot (/src/components/OwlMascot.tsx)

Versatile owl mascot component with multiple variants and animations.

Owl Variants:

  • default - Standard wise owl pose
  • waving - Friendly greeting gesture
  • looking-down - Contemplative pose
  • hands-up - Celebratory success pose
  • side - Profile view

Animations:

  • float - Gentle up/down movement (3s cycle)
  • bounce - Energetic bounce effect (1.5s cycle)
  • pulse - Scale breathing effect (2s cycle)
  • none - Static placement

Size Options:

  • sm (40x40px) - Compact header use
  • md (60x60px) - Standard placement
  • lg (80x80px) - Prominent features
  • xl (120x120px) - Hero sections

Preset Configurations:

<WelcomeOwl />     // Waving owl, bottom-right, floating
<LoadingOwl />     // Looking down, pulsing animation
<SuccessOwl />     // Hands up, bouncing celebration
<HeaderOwl />      // Small side profile for headers
<CornerOwl />      // Configurable corner placement

🏗️ Integration Points

Page-Level Integration

Each major page has been enhanced with appropriate alchemy theming:

Dashboard (/src/components/Dashboard.tsx)

  • Light mixed floating background
  • Header owl in title
  • Top-left corner owl
  • Loading owl during data fetch

Vault Manager (/src/app/vaults/page.tsx)

  • Medium beaker-focused background (reinforces laboratory theme)
  • Bottom-left corner owl
  • Header owl in title

Positions (/src/app/positions/page.tsx)

  • Medium mixed background
  • Top-right corner owl

Pipeline Builder (/src/app/pipeline/page.tsx)

  • Heavy beaker background (maximum laboratory feel)
  • Bottom-right corner owl

Landing Page (/src/app/page.tsx)

  • Welcome owl with waving animation
  • Fixed bottom-right position

Swap Interface (/src/components/SwapInterface.tsx)

  • Success owl appears on successful transactions
  • 3-second celebration animation

Loading Components (/src/components/LoadingSpinner.tsx)

  • Loading owl with pulse animation
  • Integrated into all loading states

🎭 Design Principles

Non-Intrusive Placement

  • All floating elements positioned in safe zones (corners, edges)
  • No overlap with text, buttons, or data visualizations
  • Subtle opacity (15-30%) maintains focus on content

Contextual Theming

  • Beaker Focus: Laboratory/scientific pages (vaults, pipelines)
  • Owl Focus: Trading/action pages (swaps, analytics)
  • Mixed: General pages (dashboard, positions)

Performance Optimized

  • Lazy loading of images
  • CSS transforms for smooth animations
  • Efficient re-renders with proper memoization

Responsive Design

  • Adaptive positioning based on screen size
  • Safe zone calculations for all viewports
  • Graceful degradation on smaller screens

🖼️ Asset Library

Owl Variants (5 total)

  • Owl_1.png - Default wise pose
  • Owl_Waiving.png - Friendly greeting
  • Owl_Looking_Down.png - Contemplative
  • Owl_Both_Hands_Up.png - Celebration
  • Owl_arms_at_side_looking_forward.png - Profile

Laboratory Equipment (10 total)

  • Beaker_1.png through Beaker_10.png - Various beaker designs
  • Test_Tube.png - Classic test tube

🔧 Customization

Adding New Floating Elements

<AlchemyBackground 
  density="medium"     // light | medium | heavy
  theme="mixed"        // owl | beaker | mixed
  className="custom"   // Optional CSS class
/>

Creating Custom Owl Placements

<OwlMascot
  variant="waving"           // Owl pose
  size="lg"                  // Size
  animation="float"          // Animation type
  position="fixed"           // CSS position
  placement="top-right"      // Corner placement
  opacity={0.6}             // Transparency
/>

Theme Integration Checklist

When adding alchemy theme to new pages:

  • Import appropriate background component
  • Add corner owl with unique placement
  • Consider header owl for titles
  • Add success/loading owls for interactions
  • Test positioning across screen sizes
  • Verify no content overlap
  • Confirm subtle, non-distracting effect

🎨 Visual Impact

The alchemy theme creates:

  • Professional mystique reinforcing the "laboratory" brand
  • Delightful micro-interactions that reward user actions
  • Cohesive visual narrative throughout the platform
  • Subtle gamification through owl reactions and celebrations
  • Enhanced brand recognition with consistent mascot presence

The integration maintains Eulixir's sophisticated DeFi aesthetic while adding personality and charm that differentiates it from generic financial dashboards.