Skip to Content
šŸŽ‰Introducing Pumki UI
AnimationsJapan Matrix

Japan Matrix Animation

A stylish animated Japanese Matrix effect featuring multiple scrolling patterns with interactive speed control. Perfect for backgrounds and hero sections.

Pumki UIPumki UI
1.0x

Installation

Usage


1import JapanMatrix from '@/components/pumki-ui/animations/japan-matrix'

1<JapanMatrix />

Example

Here are some examples showing different use cases and speed variations:

Fast Speed

Pumki UIPumki UI

Slow Speed

Pumki UIPumki UI

In a Full Page Section

Pumki UIPumki UI

Your Content Here

Features

  • Speed Control: Built-in slider to adjust animation speed from 0.5x to 2x
  • Multi-Pattern Layout: 5 repeating matrix patterns for continuous horizontal scrolling effect
  • Varied Characters: Different character sets for odd/even columns using :nth-child selectors
  • Smooth Gradient: Beautiful gradient effect from white to green to transparent
  • Responsive: Optimized font sizes and dimensions for mobile devices
  • Performance: Uses CSS animations and variables for smooth 60fps performance

Props

PropTypeDefaultDescription
speednumber1Animation speed multiplier (0.5 = fast, 2 = slow)
showSpeedControlbooleantrueShow/hide the speed control slider

Customization

The component includes a speed control slider that allows users to adjust the animation speed interactively. The speed factor ranges from 0.5x (fastest) to 2x (slowest).

You can customize the component by modifying:

  • columnTimings: Adjust animation delays and durations for each column
  • Default speed value in useState(1): Change the initial animation speed
  • Gradient colors: Modify the background gradient in .matrix-column::before
  • Character content: Update the content in the :nth-child selectors for different characters
Last updated on
TimelineBall Pit