react-usa-takeover 🇺🇸

America 250 Edition (1776-2026)

A patriotic full-screen USA takeover animation for React. Click the flag, witness freedom.

Celebrating America's Semiquincentennial - 250 years of freedom.

   ★ 1776 — 2026 ★
        250
   YEARS OF FREEDOM

Features

• America 250 Badge - Gold metallic "1776-2026" anniversary display
• "250" Star Formation - Stars form "250" in the grand finale
• Rotating Patriotic Quotes - JFK, Lincoln, FDR, and more
• 6-Stage Choreographed Animation - 13-second patriotic experience
• WCAG 2.1 AA Accessible - Keyboard support, reduced motion, ARIA
• DOGE-Approved Performance - 33% fewer DOM nodes, memoized renders
• TypeScript - Full type definitions included

Installation

npm install react-usa-takeover

Usage

import { USFlagWithFireworks } from 'react-usa-takeover';
import 'react-usa-takeover/styles.css';

function Footer() {
  return (
    <footer>
      <span>Made in America</span>
      <USFlagWithFireworks />
    </footer>
  );
}

Demo

Click the 🇺🇸 flag to trigger:

1. Initial Burst (0-0.5s) - Shockwave effect
2. Fireworks (0.5-2s) - 12 firework launchers at varying heights
3. Flag Formation (2-4s) - 13 stripes + 50 animated stars
4. Wave Effect (4-6s) - Patriotic shimmer with "250 YEARS STRONG"
5. Eagle Flyover (6-8s) - Eagle with F-16 escort
6. Liberty Bell (8-10s) - Bell rings with patriotic quotes
7. Grand Finale (10-13s) - 25-eagle squadron, "250" star formation, confetti

Props

Prop	Type	Default	Description
className	string	''	Additional CSS classes
duration	number	13000	Animation duration (ms)
onOpen	() => void	-	Callback when animation starts
onClose	() => void	-	Callback when animation closes
onComplete	() => void	-	Callback when animation finishes
showAnniversary	boolean	true	Show 1776-2026 badge
quote	string	-	Custom quote (random if not set)
reducedMotion	boolean	false	Force reduced motion mode

Keyboard Support

• ESC - Close the takeover
• Respects prefers-reduced-motion system setting

CSS Customization

Override CSS variables to customize colors:

:root {
  --usa-red: #B22234;
  --usa-white: #FFFFFF;
  --usa-blue: #3C3B6E;
  --usa-gold: #FFD700;
}

Advanced Usage

Export individual components for custom compositions:

import {
  FireworksDisplay,
  FlagFormation,
  EagleAnimation,
  GrandFinale,
  Star250Formation,
  PATRIOTIC_QUOTES,
} from 'react-usa-takeover';

Patriotic Quotes Included

• "We the People..." - U.S. Constitution
• "Give me liberty, or give me death!" - Patrick Henry
• "Ask not what your country can do for you..." - JFK
• "Government of the people, by the people, for the people" - Lincoln
• "The only thing we have to fear is fear itself" - FDR
• And 7 more...

Performance (DOGE Report)

Metric	Value
DOM Nodes (peak)	~235
Bundle Size	~12KB gzipped
Re-renders	Memoized
Accessibility	WCAG 2.1 AA

Why?

July 4, 2026 marks America's 250th birthday. This component celebrates the Semiquincentennial in style.

Built for BOMForge - helping rebuild American manufacturing, one part at a time.

License

MIT - Go forth and spread freedom.

---

"The Arsenal of Democracy never closed. It just went digital."

🇺🇸 UNITED WE STAND 🇺🇸