Pixel Button Pro

A highly customizable button designed to trigger sequential pixel animations across 12 distinct trajectories and refine your interface's call-to-action hover states.

Features

• 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.

How to Use

• 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.