Flickering grid

Displays a dynamic grid of flickering squares, creating an eye-catching effect. Customize the grid's color, size, opacity, and spacing for added visual interest.

Props

color?: string
The color of the flickering grid.
Default: #1d4ed8

flicker-chance?: number
The chance a flicker happens.
Default: 0.15

gap?: number
The gap between each cell.
Default: 6

max-opacity?: number
The maximum opacity of a cell.
Default: 0.3

size?: number
The size of each cell.
Default: 3

Examples

Free

When used freely, the flickering grid fills the parent container.

Preview

Code

<template>
    <FluxAspectRatio :aspect-ratio="16 / 9">
        <FluxFlickeringGrid/>
    </FluxAspectRatio>
</template>

<script
    lang="ts"
    setup>
    import { FluxAspectRatio, FluxFlickeringGrid } from '@flux-ui/flux';
</script>