.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}

Ascii Swell

backgroundPro

A sea of monospace characters rolled by layered noise waves, with ripples thrown by the pointer.

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.

ascii-swell.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type AsciiSwellProps = {  ramp?: string  invert?: boolean  direction?: SwellDirection  cellSize?: number  fontWeight?: number  fontFamily?: string  color?: string  speed?: number  tension?: number  scale?: number  intensity?: number  rippleForce?: number  rippleRadius?: number  interactive?: boolean  opacity?: number  label?: string  children?: ReactNode  className?: string}export function AsciiSwell({  ramp = ' .:-=+*#%@',  invert = false,  direction = 'right',  cellSize = 13,  fontWeight = 500,  fontFamily = 'ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',  color = 'currentColor',  speed = 1,  tension = 1,  scale = 1,  intensity = 1,  rippleForce = 1,  rippleRadius = 150,  interactive = true,  opacity = 1,  label,  children,  className,}: AsciiSwellProps) {  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

Ascii Swell 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/ascii-swell

MCP

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

AsciiSwellProps

Prop	Type	Default	What it does
`ramp`	`string`	`' .:-=+*#%@'`	Characters from the quietest to the loudest. The first is the empty end of the scale; a space leaves the cell blank.
`invert`	`boolean`	`false`	Flip the ramp, so the waves are drawn as dark troughs on a dense field instead of bright crests on a sparse one.
`direction`	`SwellDirection`	`'right'`	The way the waves travel across the field.
`cellSize`	`number`	`13`	Font size of a character cell in CSS pixels. Smaller cells give a finer picture and cost more to draw.
`fontWeight`	`number`	`500`	Weight of the monospace font, 100 to 900.
`fontFamily`	`string`	`'ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace'`	Font stack for the characters. It should be monospace so the grid stays even.
`color`	`string`	`'currentColor'`	Colour of the characters. Any CSS colour, including `var(--x)`; defaults to the inherited text colour.
`speed`	`number`	`1`	How fast the waves travel. 0 freezes them.
`tension`	`number`	`1`	How strongly the waves are bent and kinked by the slow noise underneath, 0 to 2. 0 gives straight bands.
`scale`	`number`	`1`	Size of the waves. Above 1 they are wider and calmer, below 1 tighter.
`intensity`	`number`	`1`	How much of the ramp the waves use, 0 to 2. Low values stay close to the middle of the ramp.
`rippleForce`	`number`	`1`	Strength of the ripples the pointer makes, 0 to 3. 0 turns them off.
`rippleRadius`	`number`	`150`	How far the ripples reach, in CSS pixels.
`interactive`	`boolean`	`true`	When false the pointer is ignored.
`opacity`	`number`	`1`	Overall opacity of the characters, 0 to 1.
`label`	`string`	–	Accessible description. When set the canvas becomes `role="img"` with this label (children stay accessible); otherwise it is decorative.
`children`	`ReactNode`	–	Content drawn on top of the field.
`className`	`string`	–	–

Preview

Code

The code is locked

Props

A11y