FlickeringGrid

Preview

Installation

pnpm add fancy-ui-svelte

import { FlickeringGrid } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { FlickeringGrid } from 'fancy-ui-svelte';
</script>

<FlickeringGrid />

Examples

Basic Usage

svelte

<script lang="ts">
	import { FlickeringGrid } from "$lib/fancy-ui/flickering-grid";
</script>

<div class="bg-background mx-auto h-64 w-full max-w-md overflow-hidden rounded-xl border">
	<FlickeringGrid />
</div>

Custom Colors

svelte

<script lang="ts">
	import { FlickeringGrid } from "$lib/fancy-ui/flickering-grid";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid color="#6366f1" maxOpacity={0.5} />
	</div>
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid color="#ef4444" maxOpacity={0.4} />
	</div>
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid color="#22c55e" maxOpacity={0.4} />
	</div>
</div>

Grid Size Variations

svelte

<script lang="ts">
	import { FlickeringGrid } from "$lib/fancy-ui/flickering-grid";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid squareSize={2} gridGap={2} maxOpacity={0.4} />
	</div>
	<div class="bg-background h-48 w-56 overflow-hidden rounded-xl border">
		<FlickeringGrid squareSize={8} gridGap={4} maxOpacity={0.3} />
	</div>
</div>

Interactive Playground

svelte

<script lang="ts">
	import { FlickeringGrid } from "$lib/fancy-ui/flickering-grid";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{ key: "color", type: "color", label: "Color" },
		{ key: "flickerChance", type: "range", label: "Flicker Chance", min: 0.01, max: 1, step: 0.01 },
		{ key: "maxOpacity", type: "range", label: "Max Opacity", min: 0.05, max: 1, step: 0.05 },
		{ key: "squareSize", type: "range", label: "Square Size", min: 1, max: 20, step: 1 },
		{ key: "gridGap", type: "range", label: "Grid Gap", min: 1, max: 20, step: 1 },
	]}
	initialValues={{
		color: "#000000",
		flickerChance: 0.3,
		maxOpacity: 0.3,
		squareSize: 4,
		gridGap: 6,
	}}
>
	{#snippet preview(values)}
		<div class="bg-background mx-auto h-64 w-full max-w-md overflow-hidden rounded-xl border">
			<FlickeringGrid
				color={values.color as string}
				flickerChance={values.flickerChance as number}
				maxOpacity={values.maxOpacity as number}
				squareSize={values.squareSize as number}
				gridGap={values.gridGap as number}
			/>
		</div>
	{/snippet}
</PropsPlayground>

Props

Prop	Type	Default	Description
`squareSize`	number	`4`	Size of each grid square in pixels
`gridGap`	number	`6`	Gap between squares in pixels
`flickerChance`	number	`0.3`	Probability of a square changing opacity each second (0-1)
`color`	string	`"#000000"`	Color of the squares (hex format)
`maxOpacity`	number	`0.3`	Maximum opacity of squares (0-1)
`width`	number	-	Fixed width in pixels (defaults to container width)
`height`	number	-	Fixed height in pixels (defaults to container height)