Spaces:
Paused
Paused
File size: 2,326 Bytes
d530f14 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | # Flame Effects Rules
When working with visual effects components in components-new/shared/effects:
## Flame ASCII System
The flame effects are data-driven ASCII animations that create subtle, fire-inspired backgrounds.
### How It Works
1. **data.json Files**: Each flame component has an accompanying `data.json` file containing ASCII art frames
2. **Frame Animation**: Components cycle through frames at specified intervals (40-85ms)
3. **Visibility-Based**: Uses `setIntervalOnVisible` to only animate when in viewport
4. **innerHTML Rendering**: ASCII frames are inserted as HTML to preserve formatting
### Available Flames
#### CoreFlame
- Frame Speed: 80ms
- Size: 1110px × 470px
- Color: `text-black-alpha-20`
- Usage: Background texture for sections
#### AsciiExplosion
- Frame Speed: 40ms (faster)
- Initial Delay: 30 frames (1.2s)
- Color: `text-[#FA5D19]` (heat orange)
- Usage: Dramatic accent for CTAs or empty states
#### HeroFlame
- Frame Speed: 85ms
- Features: Mirrored flames on both sides
- Usage: Hero sections with dual flames
#### FlameBackground (Wrapper)
- Intensity based on metrics (0-100)
- Dynamic color (black → orange)
- Speed increases with intensity
- Optional pulse animation
### Usage Examples
```tsx
import { CoreFlame } from '@/components/shared/effects/flame';
import { FlameBackground } from '@/components/shared/effects/flame';
// Static flame
<div className="relative">
<CoreFlame />
<YourContent />
</div>
// Dynamic intensity flame
<FlameBackground intensity={cpuUsage} animate={cpuUsage > 80}>
<DashboardCard />
</FlameBackground>
```
### Performance Considerations
- **Viewport Detection**: Only animates when visible
- **GPU Acceleration**: Use `transform` for positioning
- **Frame Caching**: Frames are pre-loaded from JSON
- **Cleanup**: Intervals cleared on unmount
### Design Guidelines
- **Subtlety**: Keep opacity low (10-30%) for backgrounds
- **Context**: Use sparingly, match intensity to data
- **Accessibility**: Ensure contrast ratios maintained
- **Mobile**: Consider reducing/disabling on mobile for performance
### Custom Utility Classes
- `cw-*`: Custom width (e.g., `cw-720` = 720px)
- `ch-*`: Custom height (e.g., `ch-470` = 470px)
- `font-ascii`: Monospace font for ASCII art
- Colors from heat scale: `text-heat-*`, `text-black-alpha-*` |