Hi fellow devs! 👋
We're excited to share our latest coding experiment and what turned out to be a surprisingly fun tool: a browser-based hue animation generator.
https://gbti.network/products/js-animate-hue/
You know that moment when you're adjusting the hue slider in your favorite image editor and watching your image cycle through the entire color spectrum - from electric blues, vibrant magentas, and sunset oranges? Haven't you thought at some point, "This transition would make an incredible animation"?
We decided to scratch that itch and build exactly that: a JavaScript tool that transforms any image into a mesmerizing color-shifting animation.
What it does
The tool takes any image you upload and creates smooth animations by cycling through hue transformations. But it goes beyond just basic hue shifts - you can also animate brightness and contrast changes to create some truly psychedelic effects.
Core Controls:
- Interactive SVG color wheel - Drag handles on a half-circle hue selector to define exactly which colors your animation cycles through (-180° to +180°)
- Brightness animation - Ranges from -100 (completely dark) to +100 (super bright) with presets like "Sunrise Effect" and "Fade to Black"
- Contrast animation - Adjust from -100 (flat/washed out) to +100 (ultra-sharp) with options like "Dramatic Reveal" and "Vintage Film"
- Animation timing - Control frame count (1-360 frames), speed (1-60 FPS), and seamless looping
- Resolution scaling - Output from 50% to 150% of original size for file size optimization
Smart Presets:
The tool includes thoughtfully designed presets for each effect:
- Hue: Full spectrum rainbow, warm sunset tones, cool ocean shifts
- Brightness: Sunrise/Dawn Effect, Fade to Black, Flash/Glow, Breathing Light, Reveal Effect
- Contrast: Dramatic Reveal, Dreamy to Vivid, Pop Effect, Sharp to Soft, Vintage Film
The technical bits & export formats
What started as a simple hue-shifting experiment evolved into a pretty robust image processing tool. Under the hood, it uses:
- Canvas API for real-time image manipulation and frame generation
- Web Workers with gif.js and gifenc libraries for smooth GIF encoding without freezing the browser
- MediaRecorder API for high-quality WebM and MP4 video output with configurable bitrates
- SVG-based controls for that smooth, interactive color wheel
Export Options:
The tool supports three major formats, each optimized for different use cases:
- GIF Animation - Universal compatibility, perfect for web embedding and social sharing
- WebM Video - Modern codec with excellent compression, ideal for web platforms
-
MP4 Video (H.264) - Industry standard with multiple quality settings:
- Low (5 Mbps) - Smaller files for quick sharing
- Medium (10 Mbps) - Balanced quality and size
- High (20 Mbps) - Professional quality
- Lossless (50+ Mbps) - Maximum quality for final output
Social Media Ready:
The output formats work perfectly across all major platforms:
- X (Twitter) - MP4 with H.264 codec (up to 512MB, 140 seconds)
- LinkedIn - MP4 with H.264 and AAC audio (up to 5GB, 10 minutes)
- Instagram - MP4 with H.264 for Feed, Reels, and Stories (up to 4GB)
The codec implementations include built-in brightness and contrast adjustments that work at the pixel level, giving you smooth transitions that would be difficult to achieve in traditional video editing software.
The whole thing runs entirely in your browser - no servers, no uploads, no tracking. Your images never leave your device.
Get Started
Check out the project:
Give it a try and let us know what you create! We'd love to see what kind of psychedelic masterpieces people come up with. Upload your creations to giphy and share them in the comments or tag us on social media @gbti_network!
Top comments (0)