Introduction
Bring a retro-digital aesthetic to your Framer projects with the Pixel Type component. Perfect for creative headers, nostalgic UI elements, 404 pages, or interactive pixel-based displays, this component allows you to create animated, pixel-styled text with full control over color, size, and animation timing.
Component Features
Content
Customize the text that appears in your pixel display. Supports letters, numbers, spaces, and select symbols.
Multi-color or Single Color
Enable multi-color mode to cycle through multiple pixel colors. Add as many color values as you’d like for dynamic and vibrant animations.
Content Scale
Adjust the overall scale of the text content independently of the pixel size for more control over visual proportions.
Pixel Size
Define the size of each individual pixel block. Higher values create chunkier, more dramatic pixelation.
Animation
Toggle animation on or off. When enabled, the component animates through the pixel color cycle for eye-catching effects.
Start Delay
Set a delay before the animation begins, allowing synchronization with other on-screen elements or effects.
Animation Speed
Control how fast each animation cycle progresses. Combine with delay and pause time for custom timing patterns.
Note: If the animation speed is too slow and the duration too short, the pixels don't have enough time nor speed to smoothly return to their initial spot and will jump instantly.
Pause Time
Define a pause between animation loops to prevent constant movement and create a more relaxed pacing.
Loop Animation
Choose whether the animation should loop continuously or stop after a single cycle.
Pixel Roundness
Tweak the roundness of each pixel block, from sharp squares (0) to fully rounded circles (100).
Background
Set the background color of the pixel display. This can be used to match or contrast with surrounding design elements.
