Visual
Sep 1, 2025
0 views
A WebGL-based neon shader effect for Framer. Renders an animated glowing wave with hue-shifted neon colors, interactive hover response, and real-time distortion. Ideal for futuristic hero sections, reactive backgrounds, or experimental UI flourishes.
//
Tags
Add to your Framer project and place on the canvas.
Configure Base Color + Hover Color (Vec3 strings, e.g., "0.2,0.4,1.0").
Adjust distortion: Vertical Distortion, Wave Frequency, Glow Alpha.
Toggle Mouse Reactive and Reset on Leave for interaction control.
Use Section ID to isolate multiple instances without input conflicts.
Preset A (Default Glow): base=0.2,0.4,1.0 · hover=1.0,0.3,0.8 · speed=1.0
Preset B (Cyber Pink): base=0.8,0.0,0.8 · hover=0.2,0.8,1.0 · glow=1.5 · bgAlpha=0.8
Preset C (Subtle Lines): base=0.1,0.6,0.9 · hover=0.9,0.1,0.2 · speed=0.5 · distortion=0.2
Compiles vertex and fragment shaders on mount.
Fragment shader computes neon wave using sine distortion + rect masks.
Colors hue-shifted via YIQ → RGB matrix transform.
Mouse position injected into shader uniforms for hover/interaction.
Continuous requestAnimationFrame updates iTime, wave distortion, and glow.
Lower Wave Frequency + Glow Alpha = less GPU stress.
Keep animationSpeed ≤ 2 for smoothness across devices.
On low-end hardware, disable Mouse Reactive to reduce uniform updates.
Requires WebGL (desktop and most mobile browsers).
Firefox may render slightly differently due to composite differences.
Pointer events disabled (pointerEvents: none on canvas).
Purely decorative; mark container aria-hidden="true" if non-essential.
Avoid excessive motion in contexts with reduced motion settings (can wrap with prefers-reduced-motion check).
No external calls; all shader code runs locally.
No eval/dangerous APIs.
Cleans up event listeners + RAF loop on unmount.
Purely decorative; mark container aria-hidden="true" if non-essential.
Avoid excessive motion in contexts with reduced motion settings (can wrap with prefers-reduced-motion check).
No external calls; all shader code runs locally.
No eval/dangerous APIs.
Cleans up event listeners + RAF loop on unmount.
Shader math adapted from GLSL neon and wave distortion patterns.
Implementation & Framer adaptation by SecretoCho Design.
SecretoCho Design 2025
Provided “as is” for visual/UX purposes. Validate performance impact, accessibility, and GPU compatibility before production use.
Stay ahead of the curve with insights into emerging visualization trends and technologies.