Preview

Pixelated

Revealed

Preview

Pixelated

Revealed

Preview from desktop

Pixelated Timer Image Reveal (New Update!)

Pixelated Timer Image Reveal (New Update!)

🕒 Now set your time-zone and you're good to go!

🕒 Now set your time-zone and you're good to go!

Easily set the time & date from the calendar and timer and you're all set and the time will reveal for everyone at the same time.

Easily set the time & date from the calendar and timer and you're all set and the time will reveal for everyone at the same time.

Pixel Countdown Reveal uses UTC (Coordinated Universal Time) for its countdown timer.

Pixel Countdown Reveal uses UTC (Coordinated Universal Time) for its countdown timer.

Product Deisgn

Product Deisgn

Pixelated Countdown Reveal is a sleek, motion-driven component that transforms your static hero or landing sections into dynamic, time-based visuals. It combines a live countdown timer with an elegant pixelated media transition, creating a sense of anticipation and depth for upcoming launches, product drops, or events.


The pixel grid effect smoothly animates between levels of clarity, while your background image or looping video stays responsive and cinematic. Every element—from pixel density to font, colors, and transition timing—is fully adjustable, giving you total creative control.


Perfect for “Coming Soon” pages, product teasers, or campaign countdowns, this component blends functionality with an artistic reveal effect that feels premium and immersive.

Pixel Countdown Reveal uses UTC (Coordinated Universal Time) for its countdown.
When setting your target date and time, make sure to convert your local time to UTC (00:00) to ensure the countdown ends at the correct moment.


Key Features

  • Live countdown with editable target date and custom labels

  • Smooth pixelation transition for image or video backgrounds

  • Supports autoplay and looping video backgrounds

  • Fully customizable: pixel size, transition speed, corner radius, and counter styling

  • Adjustable font, colors, and background opacity for the counter

  • Automatic slide playback with interval control for multiple media assets

  • Responsive and adaptive to all screen sizes and container fits

  • Lightweight and easy to integrate into any Framer project


Refund Policy

All sales are final due to the nature of digital products. Please review all details before purchasing.

Pixelated Countdown Reveal is a sleek, motion-driven component that transforms your static hero or landing sections into dynamic, time-based visuals. It combines a live countdown timer with an elegant pixelated media transition, creating a sense of anticipation and depth for upcoming launches, product drops, or events.


The pixel grid effect smoothly animates between levels of clarity, while your background image or looping video stays responsive and cinematic. Every element—from pixel density to font, colors, and transition timing—is fully adjustable, giving you total creative control.


Perfect for “Coming Soon” pages, product teasers, or campaign countdowns, this component blends functionality with an artistic reveal effect that feels premium and immersive.

Pixel Countdown Reveal uses UTC (Coordinated Universal Time) for its countdown.
When setting your target date and time, make sure to convert your local time to UTC (00:00) to ensure the countdown ends at the correct moment.


Key Features

  • Live countdown with editable target date and custom labels

  • Smooth pixelation transition for image or video backgrounds

  • Supports autoplay and looping video backgrounds

  • Fully customizable: pixel size, transition speed, corner radius, and counter styling

  • Adjustable font, colors, and background opacity for the counter

  • Automatic slide playback with interval control for multiple media assets

  • Responsive and adaptive to all screen sizes and container fits

  • Lightweight and easy to integrate into any Framer project


Refund Policy

All sales are final due to the nature of digital products. Please review all details before purchasing.

New Updates

New Updates

🎯 Core Functionality

  1. UTC Offset Control - utcOffset prop (-12 to +14 in 0.5 steps) to adjust countdown date based on user’s timezone

  2. Pixel Reveal Animation - Gradual pixelation progress over time (every 2.5 seconds)

  3. Countdown Start Delay - 100ms delay before countdown appears

  4. Transition Zone - Smooth image transition in final 15% of reveal

📍 Counter Positioning System

  1. 7 Position Presets - center, top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

  2. Responsive Margins - 16px desktop / 12px mobile for positioned counters

  3. Position Helper Function - getCounterPositionStyles() for clean positioning logic

📏 Counter Size System

  1. 7 Size Options - tiny, mini, extra-small, small, medium, large, extra-large

  2. Dynamic minWidth - Different sizes for mobile (50-160px) and desktop (85-340px)

  3. Font Scaling - Proportional font sizes (0.55x to 1.3x multiplier) based on counter size

  4. Proportional Padding - Automatic padding adjustment per size

  5. Proportional Gap Spacing - Gap scales with counter size

🎨 Counter Styling & Customization

  1. Background Visibility Toggle - showCounterBackground to show/hide counter background

  2. Background Opacity Control - Separate opacity control for background

  3. Border Radius Control - counterBorderRadius for counter corners (0-40px)

  4. Custom Gap Spacing - useCustomCounterGap toggle + counterGapSpacing slider (0-30px)

  5. Shadow System - Full shadow customization with 5 controls:

    • Shadow color picker

    • Shadow opacity (0-1)

    • Shadow blur (0-20px)

    • Shadow offset X (-10 to 10px)

    • Shadow offset Y (-10 to 10px)

  6. Border System - Full border customization with 4 controls:

    • Border width (0.5-4px)

    • Border color picker

    • Border style (solid, dashed, dotted)

    • Toggle on/off

🛠️ Technical Improvements

  1. Robust Color Parser - parseColor() function supporting multiple formats (hex, rgb, rgba, color objects)

  2. Font Size Normalization - normalizeFontSizePx() for reliable font size handling

  3. Mobile Variant Support - Complete responsive system (desktop vs mobile scaling)

  4. Code Protection - @framerDisableUnlink added to component

  5. Enhanced PixelateCanvas - Improved pixel rendering with:

    • Offscreen canvas for performance

    • Proper image fitting (cover/contain/fill)

    • Edge coverage fixes

    • Smooth transition blending

    • GPU-optimized rendering

📊 Counter Display Improvements

  1. Countdown Started State - Counter only displays after initialization

  2. Slide Direction Tracking - Smart animation direction (forward/backward)

  3. Responsive Slide Navigation - Mobile-optimized arrow buttons

  4. Responsive Slideshow Dots - Mobile-optimized dot indicators

🎬 Animation & Transitions

  1. Slide Direction Detection - Intelligent direction based on slide movement

  2. Smooth Pixel Transitions - Gradual reveal with edge smoothing

  3. Easing Functions - Custom easing for slide transitions

📱 Mobile Optimizations

  1. Mobile Font Scaling - Automatic 30% reduction on mobile (0.7x multiplier)

  2. Mobile Border Radius Scaling - Automatic 70% reduction on mobile

  3. Mobile Margins - Different margins for positioned counters (12px vs 16px)

  4. Mobile Counter Sizes - Significantly smaller on mobile devices

  5. Mobile-Responsive Arrows - 80% size reduction on mobile

✅ Total New Features: 35 Major Additions

Property Controls Added: 28

  • counterPosition

  • counterSize

  • showCounterBackground

  • counterBackgroundColor (conditional)

  • counterBackgroundOpacity (conditional)

  • counterBorderRadius

  • useCustomCounterGap

  • counterGapSpacing

  • showCounterShadow

  • counterShadowColor (conditional)

  • counterShadowOpacity (conditional)

  • counterShadowBlur (conditional)

  • counterShadowOffsetX (conditional)

  • counterShadowOffsetY (conditional)

  • showCounterBorder

  • counterBorderWidth (conditional)

  • counterBorderColor (conditional)

  • counterBorderStyle (conditional)

  • utcOffset (conditional)

The component has evolved from a basic countdown timer into a fully-featured, highly-customizable countdown reveal component with extensive styling options, responsive design, and professional-grade animation capabilities.

🎯 Core Functionality

  1. UTC Offset Control - utcOffset prop (-12 to +14 in 0.5 steps) to adjust countdown date based on user’s timezone

  2. Pixel Reveal Animation - Gradual pixelation progress over time (every 2.5 seconds)

  3. Countdown Start Delay - 100ms delay before countdown appears

  4. Transition Zone - Smooth image transition in final 15% of reveal

📍 Counter Positioning System

  1. 7 Position Presets - center, top-left, top-center, top-right, bottom-left, bottom-center, bottom-right

  2. Responsive Margins - 16px desktop / 12px mobile for positioned counters

  3. Position Helper Function - getCounterPositionStyles() for clean positioning logic

📏 Counter Size System

  1. 7 Size Options - tiny, mini, extra-small, small, medium, large, extra-large

  2. Dynamic minWidth - Different sizes for mobile (50-160px) and desktop (85-340px)

  3. Font Scaling - Proportional font sizes (0.55x to 1.3x multiplier) based on counter size

  4. Proportional Padding - Automatic padding adjustment per size

  5. Proportional Gap Spacing - Gap scales with counter size

🎨 Counter Styling & Customization

  1. Background Visibility Toggle - showCounterBackground to show/hide counter background

  2. Background Opacity Control - Separate opacity control for background

  3. Border Radius Control - counterBorderRadius for counter corners (0-40px)

  4. Custom Gap Spacing - useCustomCounterGap toggle + counterGapSpacing slider (0-30px)

  5. Shadow System - Full shadow customization with 5 controls:

    • Shadow color picker

    • Shadow opacity (0-1)

    • Shadow blur (0-20px)

    • Shadow offset X (-10 to 10px)

    • Shadow offset Y (-10 to 10px)

  6. Border System - Full border customization with 4 controls:

    • Border width (0.5-4px)

    • Border color picker

    • Border style (solid, dashed, dotted)

    • Toggle on/off

🛠️ Technical Improvements

  1. Robust Color Parser - parseColor() function supporting multiple formats (hex, rgb, rgba, color objects)

  2. Font Size Normalization - normalizeFontSizePx() for reliable font size handling

  3. Mobile Variant Support - Complete responsive system (desktop vs mobile scaling)

  4. Code Protection - @framerDisableUnlink added to component

  5. Enhanced PixelateCanvas - Improved pixel rendering with:

    • Offscreen canvas for performance

    • Proper image fitting (cover/contain/fill)

    • Edge coverage fixes

    • Smooth transition blending

    • GPU-optimized rendering

📊 Counter Display Improvements

  1. Countdown Started State - Counter only displays after initialization

  2. Slide Direction Tracking - Smart animation direction (forward/backward)

  3. Responsive Slide Navigation - Mobile-optimized arrow buttons

  4. Responsive Slideshow Dots - Mobile-optimized dot indicators

🎬 Animation & Transitions

  1. Slide Direction Detection - Intelligent direction based on slide movement

  2. Smooth Pixel Transitions - Gradual reveal with edge smoothing

  3. Easing Functions - Custom easing for slide transitions

📱 Mobile Optimizations

  1. Mobile Font Scaling - Automatic 30% reduction on mobile (0.7x multiplier)

  2. Mobile Border Radius Scaling - Automatic 70% reduction on mobile

  3. Mobile Margins - Different margins for positioned counters (12px vs 16px)

  4. Mobile Counter Sizes - Significantly smaller on mobile devices

  5. Mobile-Responsive Arrows - 80% size reduction on mobile

✅ Total New Features: 35 Major Additions

Property Controls Added: 28

  • counterPosition

  • counterSize

  • showCounterBackground

  • counterBackgroundColor (conditional)

  • counterBackgroundOpacity (conditional)

  • counterBorderRadius

  • useCustomCounterGap

  • counterGapSpacing

  • showCounterShadow

  • counterShadowColor (conditional)

  • counterShadowOpacity (conditional)

  • counterShadowBlur (conditional)

  • counterShadowOffsetX (conditional)

  • counterShadowOffsetY (conditional)

  • showCounterBorder

  • counterBorderWidth (conditional)

  • counterBorderColor (conditional)

  • counterBorderStyle (conditional)

  • utcOffset (conditional)

The component has evolved from a basic countdown timer into a fully-featured, highly-customizable countdown reveal component with extensive styling options, responsive design, and professional-grade animation capabilities.

Questions?

Reach out via email integrystudio@gmail.com or on Linkedin.

Questions?

Reach out via email integrystudio@gmail.com or on Linkedin.

Setting Up

Need help setting up your website or integrating this component?

Reach out and we’ll help get it running perfectly in your Framer project.

Setting Up

Need help setting up your website or integrating this component?

Reach out and we’ll help get it running perfectly in your Framer project.

Check it out on

Marketplace

Don’t have an account?

Signup with Framer

Back to Components

Buy for $39

Buy for $39

Create a free website with Framer, the website builder loved by startups, designers and agencies.