# Magnetic Grid Demo

> Demo showing magnetic grid component.

A shadcn/ui block from the [@systaliko-ui](https://systaliko-ui.vercel.app) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/systaliko-ui/magnetic-grid-demo).

- Page, with a live preview: https://shadcn.exchange/r/systaliko-ui/magnetic-grid-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/systaliko-ui/magnetic-grid-demo-light-5b9ca45df91037b4.png
- Registry item: https://systaliko-ui.vercel.app/r/magnetic-grid-demo.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://systaliko-ui.vercel.app/r/magnetic-grid-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://systaliko-ui.vercel.app/r/floating-elements`

## Files

### `registry/demo/blocks/magnetic-grid/index.tsx`

```tsx
'use client';

import {
  FloatingElementItem,
  FloatingElements,
} from '@/components/systaliko-ui/blocks/floating-elements';
import { Label } from '@/components/systaliko-ui/shadcn/field';
import { Slider } from '@/components/systaliko-ui/shadcn/slider';
import React from 'react';

const colors = ['bg-red-300', 'bg-indigo-300', 'bg-blue-300', 'bg-violet-300'];

export function MagneticGridDemo() {
  const [intensity, setIntensity] = React.useState(20);
  const [stiffness, setStiffness] = React.useState(110);
  const [damping, setDamping] = React.useState(15);

  return (
    <div className="h-screen space-y-6">
      <div className="border-b bg-background/80 backdrop-blur-sm p-4 z-10">
        <div className="flex flex-wrap items-end gap-6">
          <div className="flex flex-col gap-2 min-w-[180px]">
            <Label className="text-sm font-medium">
              Intensity: {intensity}px
            </Label>
            <Slider
              value={[intensity]}
              onValueChange={([v]) => setIntensity(v)}
              min={5}
              max={150}
              step={1}
            />
          </div>

          <div className="flex flex-col gap-2 min-w-[180px]">
            <Label className="text-sm font-medium">
              Stiffness: {stiffness}
            </Label>
            <Slider
              value={[stiffness]}
              onValueChange={([v]) => setStiffness(v)}
              min={20}
              max={500}
              step={10}
            />
          </div>

          <div className="flex flex-col gap-2 min-w-[180px]">
            <Label className="text-sm font-medium">Damping: {damping}</Label>
            <Slider
              value={[damping]}
              onValueChange={([v]) => setDamping(v)}
              min={1}
              max={60}
              step={1}
            />
          </div>
        </div>
      </div>

      <FloatingElements className="bg-secondary w-xs max-w-xs aspect-square mx-auto grid grid-cols-[repeat(20,minmax(0,1fr))] p-1 gap-1">
        {Array.from({ length: 300 }).map((_, i) => {
          const randomColor = colors[Math.floor(Math.random() * colors.length)];

          return (
            <FloatingElementItem
              key={i}
              className={`aspect-square ${randomColor}`}
              intensity={intensity}
              stiffness={stiffness}
              damping={damping}
            />
          );
        })}
      </FloatingElements>
    </div>
  );
}
```