.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Halftone Tide

backgroundPro

A drifting noise colour field drawn as a halftone dot grid over up to ten palette stops.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

halftone-tide.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type HalftoneTideProps = {  palette?: string[]  background?: string  frequency?: number  speed?: number  contrast?: number  cellSize?: number  paletteShift?: number  interactive?: boolean  children?: ReactNode  label?: string  className?: string}export function HalftoneTide({  palette = DEFAULT_PALETTE,  background = '#07050d',  frequency = 1.4,  speed = 1,  contrast = 1,  cellSize = 14,  paletteShift = 0,  interactive = true,  children,  label,  className,}: HalftoneTideProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Halftone Tide is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/halftone-tide

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

HalftoneTideProps

Prop	Type	Default	What it does
`palette`	`string[]`	`DEFAULT_PALETTE`	Colour stops of the ramp the dots are coloured from, two to ten of them, dark to light or however you like. Any CSS colour, `var()` and `currentColor` included. Extra stops past ten are ignored.
`background`	`string`	`'#07050d'`	Colour between the dots. Use `transparent` to let the page show through. Any CSS colour.
`frequency`	`number`	`1.4`	How busy the field is: more islands of big and small dots per screen. 1 is calm, 3 is dense.
`speed`	`number`	`1`	Drift speed of the field. 1 is slow, 0 freezes it, negative runs it backwards.
`contrast`	`number`	`1`	How hard dots swell and shrink. Below 1 is soft and even, above 1 leaves more empty space and fat dots.
`cellSize`	`number`	`14`	Distance between dot centres in CSS pixels, 4 to 40.
`paletteShift`	`number`	`0`	Slides the colour ramp along the field, 0 to 1 is one full cycle.
`interactive`	`boolean`	`true`	Dots near the pointer swell. A finger works too, while it is down. The box uses `touch-action: pan-y`, so vertical swipes still scroll the page; touch is never captured.
`children`	`ReactNode`	–	Drawn on top, centred.
`label`	`string`	–	Accessible name. When set, the field is exposed as an image; leave it out for pure decoration.
`className`	`string`	–	Sizes the box. The canvas fills it.

Preview

Code

The code is locked

Props

A11y