CyberpnkGlitchButton

Retro CRT Glitch Button for Framer

Elevate Your UI with the Cyberpunk Glitch Button The Cyberpunk Glitch Button is not just a UI element; it is a cinematic experience designed for high-end digital environments. Built on a custom CRT Flicker Engine , this component simulates the raw, electrifying energy of vintage hardware while maintaining the fluid performance of modern web standards. Whether you are building a gaming hub, a futuristic tech portfolio, or an experimental landing page, this button ensures every user interaction feels intentional and high-octane. The Science of the Glitch Unlike standard CSS transitions, this component utilizes a sophisticated keyframe-based displacement logic. On hover, the text layer physically deconstructs into independent Red and Cyan channels using kinetic RGB splitting. This creates a realistic "data-glitch" effect that mimics the misalignment found in cathode-ray tube monitors. CRT Flicker Engine & Smart Scanlines To truly capture the cyberpunk aesthetic, the button features a built-in luminosity pulsator. This engine creates organic brightness fluctuations that prevent the UI from feeling static. Additionally, the Smart Scanline system intelligently detects dark backgrounds to apply horizontal overlays, adding a layer of depth and texture that makes your buttons look like they were pulled straight from a hacker's terminal. Full Creative Control You don't need to touch a line of code to make this button yours. With extensive Property Controls, you can: - Adjust Glitch Intensity: Control the amplitude of the text shattering effect. - Modify Flicker Speed: Set the tempo of the animation to match your brand's energy. - Toggle Cyberpunk Mode: Instantly switch between a clean, minimalist button and the full experimental engine. - Smart Theming: Customize neon borders, bloom effects, and background colors with ease. Use Cases - Gaming & Esports: Create CTA buttons that look like part of a game's HUD. - Tech Portfolios: Showcase your expertise in motion design and high-interaction development. - Product Launches: Use for primary 'Enter' or 'Initialize' triggers to set a strong thematic tone.

Retro CRT Glitch Button for Framer