⚠️ Mobile is not supported yet.

Velocity Skew Feed

component

A feed whose cards shear and stretch with scroll velocity and rubber-snap back when you stop. Smoothed velocity drives a real spring (s" = k(target - s) - c*s'), integrated with frame delta-time so a hard stop overshoots once and settles. Transforms only, one write per card per frame, and the loop stops writing entirely once the spring's energy falls under threshold.

Provided by motiq

Open in

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://motiq.dev/r/velocity-skew-feed.json"

Files

Styles

Light Mode

--color-accent:

#315fea

--color-accent-fg:

#ffffff

--color-accent-hover:

#244fd1

--color-accent-text:

#244fd1

--color-bg:

#f7f9fc

--color-bg-elevated:

#f0f4f9

--color-bg-secondary:

#f0f4f9

--color-border:

#dce4ef

--color-border-strong:

#c5d1e1

--color-code-bg:

--color-code-fg:

#2a3444

--color-error:

#d92d4a

--color-error-foreground:

#ffffff

--color-fg-secondary:

#344054

--color-focus:

#315fea

--color-info:

#087dbd

--color-info-foreground:

#ffffff

--color-muted:

#667085

--color-neutral:

#475467

--color-neutral-foreground:

#ffffff

--color-secondary-accent:

#009fb3

--color-signature:

#e9564a

--color-success:

#128a55

--color-success-foreground:

#ffffff

--color-surface:

#ffffff

--color-surface-2:

#f8fafd

--color-warning:

#b86e00

--color-warning-foreground:

#ffffff

Dark Mode

--color-accent:

#4f7cff

--color-accent-fg:

#080c14

--color-accent-hover:

#6f91ff

--color-accent-text:

#7f9fff

--color-bg:

#080c14

--color-bg-elevated:

#0d1420

--color-bg-secondary:

#0d1420

--color-border:

#263449

--color-border-strong:

#354863

--color-code-bg:

#0d1420

--color-code-fg:

#cbd5e1

--color-error:

#ff5c70

--color-error-foreground:

#2a0308

--color-fg:

#f8fafc

--color-fg-secondary:

#cbd5e1

--color-focus:

#4f7cff

--color-info:

#38bdf8

--color-info-foreground:

#04121f

--color-muted:

#9caabd

--color-neutral:

#b2bccd

--color-neutral-foreground:

#111827

--color-secondary-accent:

#22c7d9

--color-signature:

#ff6b5e

--color-success:

#32d583

--color-success-foreground:

#04150c

--color-surface:

#111827

--color-surface-2:

#192337

--color-warning:

#f6b94a

--color-warning-foreground:

#2a1a00

Theme

No variables found.

Velocity Skew Feed

Installation

Files

components

Styles