Flux Columns

Installation

pnpm dlx shadcn-svelte@latest add https://sv-matrix.vercel.app/r/square-6.json

Examples

Glow Effect

Opacity & Speed

Fixed Gap Box

Pattern Look

Use Cases

Chat

Hello Brother, how you doing?

Good brother man, any plans for the weekend?

AI Chat

API Response While Fetching

Gateway health

Latency

182 ms

Success rate

99.91%

Queue depth

14 jobs

Form Submission

File Upload

Upload asset

Select a file to simulate an upload and show the loader at row level.

Button Click to Server Action

Resend workspace invitation

Triggers a server action to send a fresh invite email.

Idle until the user clicks the action.

Payment Processing

Pro annual plan

Priority support and unlimited automations

$48

Use a localized action loader instead of a full-screen checkout blocker.

Props

Square6Props

Primary loader props. Defaults shown here are the effective defaults applied by square-6.svelte.

Name	Type	Default	Description
`size`	`number`	`29`	`Overall matrix span in pixels before any optional wrapper scaling.`
`dotSize`	`number`	`5`	`Pixel size for each individual dot in the 5x5 matrix.`
`speed`	`number`	`1`	`Animation speed multiplier. Values above 1 run faster.`
`pattern`	`"diamond" \| "full" \| "outline" \| "rose" \| "cross" \| "rings"`	`"full"`	`Chooses which cells in the 5x5 matrix are active.`
`animated`	`boolean`	`true`	`Enables the default loading animation when reduced motion is not active.`
`hoverAnimated`	`boolean`	`false`	`Switches animation control to hover interactions instead of always running.`
`color`	`string`	`"currentColor"`	`Sets the root CSS color used by active dots.`
`muted`	`boolean`	`false`	`Applies the muted dot-matrix visual treatment.`
`bloom`	`boolean`	`false`	`Adds glow to brighter active dots after opacity remapping.`
`halo`	`number`	`0`	`Applies a uniform halo intensity from 0 to 1 across active dots.`
`dotClass`	`string`		`Extra class name applied to each rendered dot.`
`opacityBase`	`number`		`Overrides the low-end opacity remap target.`
`opacityMid`	`number`		`Overrides the mid-point opacity remap target.`
`opacityPeak`	`number`		`Overrides the peak opacity remap target before full opacity.`
`cellPadding`	`number`		`Explicit gap between dots. When omitted, layout derives spacing from size and dotSize.`
`boxSize`	`number`		`Wraps the matrix in a fixed square box and scales the matrix to fit.`
`minSize`	`number`		`Minimum outer size for the rendered root or wrapper.`

Forwarded HTMLDivElement Props

Common root-level attributes forwarded through `...restProps`.

Name	Type	Default	Description
`class`	`string`		`Classes applied to the root element.`
`style`	`string`		`Inline styles applied to the root element.`
`role`	`string`	`"status"`	`Accessible role for the loader.`
`aria-label`	`string`	`"Loading"`	`Accessible label for screen readers.`
`aria-live`	`string`	`"polite"`	`Announcement politeness level.`
`ref`	`HTMLDivElement \| null`		`Bindable root element reference.`
`onmouseenter`	`(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => void`		`Optional mouse-enter callback.`
`onmouseleave`	`(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => void`		`Optional mouse-leave callback.`