Stop using generic text timers.DotMatrix is a premium, high-fidelity countdown component for Framer that brings the tactile soul of physical hardware to your digital canvas.
Features:
- 🎨 16 color Presets:
- If you're lazy, just choose one or add any colors you want.
- Glass Morphism Engine: High-performance background refraction that reacts to your site’s layers
- Glow Effects: Add realistic luminescence with granular control over glow intensity, radius, and opacity.
- 5 Adaptive Layouts:
⚡ Professional Animations
- 5 Animation Styles: Choose your character—Mechanical Roll, 3D Flip, Terminal Decrypt, or CRT Scanline.
- Intelligent Stagger: Beautiful entrance animations (Slide Up, Zoom In, Fade) that make your timer feel like a premium interface, not a static element.
- 60FPS Performance: Optimized SVG rendering ensures buttery-smooth transitions even with heavy glass blurs and glow effects active.
🌍 Global & Data Ready
- 33+ Languages Out-of-the-box: Built-in localization for global launches—from English and Spanish to Arabic (RTL) and Japanese.
- Launch vs. Evergreen: Target a specific Launch Date with precise timezone controls, or use Fixed Duration for personalized "Evergreen" offers.
- Smart Persistence: In Evergreen mode, DotMatrix remembers each visitor’s progress via LocalStorage, so the countdown stays real even if they refresh the page.
🎛️ The "Power-User" tab
The component features an extensive, logically categorized control panel designed for a frictionless workflow.
- 💾 Data Tab: Toggle between Launch Date (with 14 timezone presets) and Evergreen Duration. This is where the "Zero Hour" logic lives—set up your Confetti, CTA Banners, or Redirects.
- 🎨 Style Tab: The creative heart. Switch between 5 Adaptive Layouts, adjust the Glass Morphism engine, or refine the Epic Glow settings. Access 16 designer presets or craft a custom theme from scratch.
- ✨ Motion Tab: Fine-tune the physics. Customize Entrance Animations (stagger, delay, duration) and select from 5 Digit Transition styles to match your site's personality.
🚀 Advanced Automation (The "Zero Hour" Actions)
What happens when the clock hits zero? You decide:
- 🎉 Confetti Burst: Celebrate the launch with a high-performance particle explosion.
- 📢 Smart Banner: Automatically reveal a CTA banner with a headline and link.
- 🔄 Auto-Loop: Perfect for recurring webinars or daily drops
- 🔗 Instant Redirect: Send users to a new URL the second the timer ends.
- 🙈 Stealth Mode: Automatically hide the component to clean up your UI.
⌘ Built for Framer
- CMS Ready: Bind your dates and labels directly to Framer CMS fields.
- Responsive by Default: An internal Auto-Fit engine scales the component perfectly to fit any container width, so you never have to worry about mobile overflow.
- Canvas-Friendly: Features a "Test Trigger" mode so you can preview your "On Complete" actions directly in the Framer canvas without waiting for the clock to run out.
Stop settling for boring timers. Give your next project the character it deserves with DotMatrix.
