ImageFX Loop Studio

A polished React/Vite canvas app for turning an uploaded image into a seamless animated visual loop.

Setup

npm install
npm run dev

Open the local Vite URL shown in the terminal.

Features

• Upload PNG, JPG, or WebP by file picker or drag and drop.
• Full viewport cover rendering with blur, brightness, contrast, saturation, zoom, and pan controls.
• Deterministic seeded animation engine with normalized loop time.
• Toggleable effect layers:
  • glowing particle field with count, size, speed, trails, color, and opacity
  • branching lightning storm with frequency, glow, color, and randomness
  • procedural fire patterns
  • hazy periodic fog
  • rotating sacred-geometry style shapes
  • RGB split, scanlines, jitter, and displacement glitch
  • starfield and space dust
  • vignette and bloom-style glow
  • mocked audio-reactive waveform architecture
• One-click mood presets: Cyber Storm, Inferno Ritual, Dream Fog, Cosmic Geometry, VHS Glitch, Neon Particles, and Dark Fantasy Portal.
• WebM export via MediaRecorder and canvas.captureStream.
• Frame-sequence HTML fallback when browser video recording APIs are unavailable.
• Responsive dark glass control panel, reset, and hide UI preview.

Seamless Looping

The renderer never uses unbounded wall-clock time inside effect formulas. The app calculates:

t = (elapsed % loopDuration) / loopDuration

All effects then sample periodic sin, cos, or circle-based pseudo-noise from that normalized t. During export, each frame is rendered manually as frame / totalFrames, so dropped browser frames do not change the animation state.

Known Limitations

• Export uses browser-native MediaRecorder, so exact codec support depends on the browser.
• The fallback frame export produces a downloadable HTML page containing PNG frame links rather than encoding MP4.
• The audio-reactive layer is currently a mocked waveform UI/render path for future microphone or file-audio input.