LEDMatrix

It's designed to be a highly customizable design element for your projects, featuring a variety of visual effects, style presets, and interactive options.

Available Controls

• Content

  • Text: A string input to define the text displayed on the LED matrix. The component automatically translates capital letters, numbers, and some special characters into their pixel-art equivalents.

• Styling

  • Style Preset: A dropdown to quickly apply a predefined color theme, such as "neon," "cyberpunk," "retro," or "ice."

  • LED Color: Sets the color for the lit LEDs. This control is only visible when the Style Preset is set to "Default."

  • Hover Color: Sets the color of the LEDs when the mouse hovers over the component. This is also only available in the "Default" preset.

  • Background: Sets the background color of the component.

  • Border Color: Sets the color of the border around the LED matrix.

  • Off-LED Brightness: Adjusts the brightness of the unlit LEDs, giving them a subtle glow.

  • LED Intensity: Controls the intensity of the lit LEDs.

  • Glow Effect: A toggle to enable or disable a drop-shadow glow effect on the LEDs.

• Animations

  • LED Animation: A toggle to enable or disable a subtle flickering animation on the lit LEDs.

  • Animation Speed (ms): Defines the duration of the LED animation in milliseconds.

  • Glitch Effect: A toggle to enable or disable a visual glitch effect.

  • Glitch Intensity: Controls how frequently the glitch effect occurs.

  • Scrolling Marquee: A toggle to enable or disable a marquee-style scrolling text effect.

  • Scroll Speed: Controls the speed of the scrolling text.

• Interactivity

  • Link URL: A string input for a URL, making the component clickable.

  • Open in New Tab: A toggle to determine whether the link opens in a new browser tab.

• Layout

  • Border Radius: Sets the radius of the component.

  • Padding: Adjusts the space between the content and the component's border.