# Flash SWF Glitch

## About This App
A nostalgic digital art toy that simulates corrupted Flash files with interactive glitch effects and retro-web chaos



## Specification
# Flash SWF Glitch

Create a nostalgic, glitchy tribute to the golden age of Flash — a Canvas-based digital art toy that simulates the beautiful chaos of a corrupted SWF file trying (and failing) to load. Think early-2000s web weirdness: loading bars that never finish, pixelated tweens gone wrong, scanlines, chromatic aberration, and that unmistakable "this content requires Flash Player" energy — but weaponized as an interactive glitch playground.

This is an **HTML5 Canvas App**. The graphics-heavy, real-time visual glitch effects (RGB channel splitting, datamosh smears, scanline flicker, pixel sorting) are the entire point, and Canvas gives us pixel-level control that DOM/React can't match efficiently.

## Core Concept

A fullscreen canvas displays a faux-retro "Flash stage" that continuously renders glitchy, animated content — vector-style shapes, spinning gears, bouncing balls, and marquee text reminiscent of banner ads and janky Flash intros. The user can interact to intensify, freeze, or morph the glitch effects. It's part screensaver, part instrument, part digital archaeology.

## UI Elements

### Header / Title Bar

- A retro "chrome" title bar styled like an old browser window or Flash Player frame, pinned to the top.
- Display the app name "🍓 FLASH SWF GLITCH" in a pixelated/monospace font with a subtle RGB text-shadow (red offset left, blue offset right) to sell the chromatic aberration vibe.
- Include a fake "🔴 ● Loading: intro_final_v2_REALFINAL.swf ..." status line that occasionally flickers or corrupts its own characters.

### Main Canvas Stage

- A large central `<canvas>` filling most of the viewport, with a dark background (deep navy/black `#0a0a12`).
- Continuously animated content rendered on the canvas:
  - **Vector shapes**: spinning polygons, wireframe gears, bouncing balls with motion trails.
  - **Marquee text**: scrolling messages like "WELCOME TO MY WEBSITE", "BEST VIEWED IN 800x600", "SKIP INTRO »".
  - **A perpetual loading bar** that fills, glitches, resets, and taunts the user ("99%... 12%... loading...").
- Apply layered glitch post-processing effects drawn directly on canvas:
  - **RGB channel split / chromatic aberration** that pulses.
  - **Scanlines** overlay (horizontal semi-transparent lines).
  - **Datamosh / block displacement** — randomly shift rectangular slices of the frame horizontally.
  - **Pixel sorting streaks** on random rows.
  - **Random glitch bursts** that momentarily distort the whole frame.

### Control Panel (Bottom Toolbar)

Styled like an old Flash Player right-click context menu or a Winamp-esque skin — beveled buttons with faux-3D borders. Include:

- **GLITCH INTENSITY** slider (0–100) controlling how aggressive the distortion is.
- **▶ / ⏸ Play / Pause** toggle to freeze the animation on the current frame.
- **💥 CRASH IT** button — triggers a dramatic burst of maximum glitch chaos for a couple seconds (screen tears, color explosion), then settles back down. Very satisfying.
- **🎨 PALETTE** button to cycle through retro color schemes: "Y2K Neon", "VHS", "Windows 98", "Vaporwave".
- **📸 SNAPSHOT** button to export the current glitched frame as a PNG (`canvas.toDataURL()` → download).
- **🔊 Mute/Unmute** toggle for optional glitchy audio (short bursts of white-noise / static generated via Web Audio API — keep it subtle and off by default).

### Interactivity

- **Mouse move / drag** over the canvas locally intensifies glitch at the cursor position (a "glitch brush" that smears pixels where you drag).
- **Click** triggers a small localized glitch burst at that point.
- **Keyboard**: spacebar = pause, `G` = random glitch burst, `S` = snapshot.
- The glitch effects should feel organic and never fully identical — use randomness with smooth interpolation so it breathes rather than strobes harshly (be mindful of not being too seizure-inducing at low intensity; add a note that high intensity is flashy).

### Footer

- A minimal footer bar with the retro aesthetic, including a small copyright line "© 2003 GeoCities vibes, forever" and the required link: `<a href="/remix">Remix on Berrry</a>`.

## Styling Preferences

- **Aesthetic**: unapologetically retro-web / early-2000s Flash nostalgia. Think beveled gray UI chrome, pixel fonts, neon accents, and CRT texture.
- Use a monospace / pixel-style font stack (e.g., `"Courier New", monospace` with letter-spacing) for that terminal/loader feel.
- Beveled 3D borders on buttons (`border-style: outset` / custom box-shadows) to mimic Windows 98 / old Flash UI.
- Subtle CRT vignette and scanline overlay across the whole page.
- Neon accent colors that shift with the selected palette (cyan, magenta, lime green).
- Everything should feel cohesive — like you actually stumbled onto a haunted Flash site from 2003.

## Functionality

- Real-time canvas animation loop via `requestAnimationFrame`.
- Glitch effects driven by manipulating `ImageData` (channel offsets, row shifts, block displacement) and layered overlays.
- All controls (intensity, play/pause, palette, mute) update the render in real time.
- Snapshot export downloads a PNG of the current frame.
- **Persistence**: save the user's preferred intensity, palette, and mute settings to `localStorage` so their vibe is remembered on return.
- **Fully responsive**: canvas resizes to the viewport; controls wrap gracefully on mobile, and touch gestures map to the mouse glitch-brush interactions.
- Self-contained single-page app — no server dependencies required.

## Additional Playful Touches

- A fake "Macromedia Flash Player" splash that appears for ~1.5 seconds on load, then "fails" and dissolves into the glitch — a wink to the era.
- Randomized corrupt marquee messages pulled from a fun preset list (e.g., "under construction 🚧", "u r visitor #0000042", "download more RAM").
- The loading bar's percentage should occasionally display impossible values (110%, -5%, "NaN%") for comedic effect.
- Konami-code easter egg (`↑↑↓↓←→←→BA`) that unlocks a hidden "MAXIMUM OVERGLITCH" mode with an extra intense, rainbow-soaked palette.

## About Berrry
Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain.

**Visit**: https://berrry.app

Transform your social media ideas into real web applications today.