Ebb Flat

Installation & details

Ebb Flat by NS UI. A pinned full-bleed tidal flat where scroll position is the water level: bars break surface, the channel drains and pools strand, and scrolling back floods it in exactly the order it emptied. Try the live React demo, inspect the original source, and install from PODIE.

React · Tailwind CSS · MIT license · Original registry

Added to PODIE 2026-10-04 · Catalog updated 2026-10-04 · Page updated 2026-10-04

Installation and usage

The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.

01 — Set up your project

First component? Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the component

pnpm dlx shadcn@latest add https://podie.dev/r/ns-ui--ebb-flat.json

03 — Add it to your interface

Import the component from the path created by the installer.

'use client';
import EffectEbbFlat from '@/components/podie/ns-ui--ebb-flat/demo';
export default function Example() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <EffectEbbFlat />
    </div>
  );
}

Example styling

These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.

.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }

Dependencies and distribution

clsx, tailwind-merge The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.

By NS UI · MIT license. Original component source and license included.