Banner Flag
The Banner VC flag icon rendered as thick animated Three.js lines with subtle wave motion. Features three wavy banner lines starting from the top with a vertical flagpole.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bgColor | string | transparent | Background color (use "transparent" for overlay) |
lineColor | string | #ffffff | Color of the lines |
height | string | 400px | Container height |
thickness | number | 0.08 | Thickness of lines (in scene units) |
scale | number | 3 | Scale multiplier for the flag size |
Usage
---
import BannerFlag from '@components/flare/BannerFlag.astro';
---
<BannerFlag
bgColor="#141531"
lineColor="#ffffff"
height="400px"
scale=3
/>Animation Details
- Wave motion — Three banner lines starting from top animate with subtle flowing waves
- Varied weight — Middle line is thinner for visual hierarchy and less crowding
- Phase offset — Each line has a different phase for organic movement
- Edge dampening — Waves are stronger in the middle, subtle at edges