A content-rich website for BannerVC

A modern web application built with ❤️ by
The Lossless Group
SSG and Styles with Astro and Tailwind CSS v4 for BannerVC

Modern site generation, presentations, styling, testing, and 3D graphics.

Features

Multi-Mode Theme System

A sophisticated theming engine that adapts to user preference with three distinct visual modes:

• Light Mode — Clean, professional aesthetics with ivory backgrounds and crimson accents
• Dark Mode — Bold, confident design featuring deep navy backgrounds with vibrant highlights
• Vibrant Mode — High-impact expressive styling with dramatic glows and maximum contrast

The theme system uses semantic CSS tokens that cascade automatically—change one color and watch the entire interface adapt. Mode preferences persist across sessions via localStorage.

Developer Changelog

A polished changelog system for tracking development progress, inspired by Linear, Notion, and GitHub Releases:

• Timeline View — Stripe-inspired vertical timeline grouped by month with animated interactions
• Cards View — Filterable card grid with category badges and gradient headers
• Releases View — GitHub-style collapsible release notes with version tags

Each entry supports rich markdown with:

• Aurora-X syntax highlighting for beautiful code blocks
• Mermaid diagram rendering for flowcharts and architecture visuals
• Claude AI attribution badges for AI-augmented development
• Tag-based filtering and shareable view URLs

Visit /changelog to explore the development timeline.

Design System Hub

An internal reference for collaborators documenting the complete theming system:

• Theme Tokens — Brand colors, semantic tokens, effect tokens across all modes
• Visual Swatches — Color palette with CSS variable names and hex values
• Mode Comparison — Side-by-side token values for light, dark, and vibrant
• Usage Examples — Syntax-highlighted code showing CSS variables, Tailwind classes, and helper utilities

Built for developers and AI assistants to quickly understand and implement consistent styling patterns.

Visit /design-system to explore the documentation.

Flare: Three.js Visual Effects

A collection of animated WebGL visual effects for hero backgrounds and decorative elements:

• PlanetRising — Dotted sphere with configurable lighting, parallax, and breathing animation
• EclipseEnding — Crescent illumination effect with sharp falloff and slow rotation
• BannerFlag — Animated brand icon with thick wavy lines and tilted flagpole

Each Flare component is:

• Configurable — Props for colors, sizing, animation intensity
• Performant — Optimized rendering with pixel ratio capping and geometry reuse
• Responsive — Automatic canvas resizing via ResizeObserver
• Theme-aware — Works with transparent backgrounds over gradients

Visit /design-system/flare to explore the effects gallery.

Built With

• Astro 5 — Lightning-fast static site generation
• Tailwind CSS 4 — Utility-first styling with custom theme integration
• Three.js — WebGL-powered 3D graphics and animations
• Shiki — VS Code-quality syntax highlighting
• Content Collections — Type-safe markdown with Zod schemas

🧞 Commands

All commands are run from the root of the project, from a terminal:

👀 Want to learn more about Astro?

Feel free to check our documentation or jump into our Discord server.