.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

Ein treibendes Rauschfarbfeld, gezeichnet als Halbton-Punktraster über bis zu zehn Farbstopps.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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)} />}

Der Code ist gesperrt

Halftone Tide gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

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	Typ	Standard	Was sie tut
`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.

Vorschau

Code

Der Code ist gesperrt

Props

A11y