Oblique Weave

Installation

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

Examples

Glow Effect

Opacity & Speed

Fixed Gap Box

Pattern Look

Use Cases

Chat

U2

Hello Brother, how you doing?

U1

Good brother man, any plans for the weekend?

AI Chat

Press Enter to send

API Response While Fetching

Gateway health

Latency

182 ms

Success rate

99.91%

Queue depth

14 jobs

Form Submission

The loader stays tied to the action instead of blocking the whole form.

File Upload

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

Triangle7Props

Primary loader props. Defaults shown here are the effective defaults applied by triangle-7.svelte.

NameTypeDefaultDescription
size
number 30 Overall triangle matrix span in pixels before any optional wrapper scaling.
dotSize
number 4 Pixel size for each individual dot in the 7x7 triangle matrix.
speed
number 1 Animation speed multiplier. Values above 1 run faster.
pattern
"diamond" | "full" | "outline" | "rose" | "cross" | "rings" "full" Accepted for API consistency with other loaders. Triangle loaders render their fixed triangle mask.
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`.

NameTypeDefaultDescription
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.