A highly customizable button designed to trigger sequential pixel animations across 12 distinct trajectories and refine your interface's call-to-action hover states.
12 distinct directional reveal patterns for orchestrating the exact choreographic flow of the entrance.
Adjustable animation pacing for controlling the kinetic rhythm and stagger speed of the active hover state.
Configurable cell resolution for scaling the visual density and texture of the grid structure.
Variable grid spacing for defining the structural separation between individual active elements.
Custom fill hue for aligning the animated surface directly with your specific design system.
Base background color for establishing the foundational contrast behind the active grid layer.
Scroll-aware activation for ensuring animations only calculate and trigger when visible in the user's viewport.
Sub-pixel seam coverage for eliminating visual rendering artifacts when grid spacing is reduced to zero.
Fluid layout recalculation for adapting the grid matrix seamlessly to real-time container and window adjustments.
Configurable text labels for defining the exact call-to-action layered above the animated surface.
Scalable typography metrics for fine-tuning the visual weight and legibility of your primary message.
Independent text coloring for maintaining optimal visual contrast against the dynamic pixel background.
Directional padding controls for shaping the physical footprint and internal breathing room of the interaction area.
Variable corner rounding for softening the external geometry to align directly with your specific interface aesthetic.
Drop the component into your Framer canvas.
Set your CTA text, font, color and link.
Select and customize your reveal animation.
Publish your project to view your component live.
Elevate every click into a fluid, tactile interaction.
A highly customizable button designed to trigger sequential pixel animations across 12 distinct trajectories and refine your interface's call-to-action hover states.
12 distinct directional reveal patterns for orchestrating the exact choreographic flow of the entrance.
Adjustable animation pacing for controlling the kinetic rhythm and stagger speed of the active hover state.
Configurable cell resolution for scaling the visual density and texture of the grid structure.
Variable grid spacing for defining the structural separation between individual active elements.
Custom fill hue for aligning the animated surface directly with your specific design system.
Base background color for establishing the foundational contrast behind the active grid layer.
Scroll-aware activation for ensuring animations only calculate and trigger when visible in the user's viewport.
Sub-pixel seam coverage for eliminating visual rendering artifacts when grid spacing is reduced to zero.
Fluid layout recalculation for adapting the grid matrix seamlessly to real-time container and window adjustments.
Configurable text labels for defining the exact call-to-action layered above the animated surface.
Scalable typography metrics for fine-tuning the visual weight and legibility of your primary message.
Independent text coloring for maintaining optimal visual contrast against the dynamic pixel background.
Directional padding controls for shaping the physical footprint and internal breathing room of the interaction area.
Variable corner rounding for softening the external geometry to align directly with your specific interface aesthetic.
Drop the component into your Framer canvas.
Set your CTA text, font, color and link.
Select and customize your reveal animation.
Publish your project to view your component live.
Elevate every click into a fluid, tactile interaction.
Shouvik Biswas
