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

Elastic Mesh

backgroundPro

A springy line mesh behind your content that pinches towards the pointer, sends a ripple on press and leaves a glowing trail.

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.

elastic-mesh.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type ElasticMeshProps = {  variant?: 'mesh' | 'knots' | 'both'  gap?: number  radius?: number  strength?: number  tension?: number  drift?: number  trail?: boolean  ripple?: boolean  color?: string  accentColor?: string  gridClassName?: string  children?: ReactNode  className?: string}export function ElasticMesh({  variant = 'both',  gap = 30,  radius = 220,  strength = 1,  tension = 1,  drift = 0.5,  trail = true,  ripple = true,  color = 'currentColor',  accentColor = 'var(--primary, #7c6cff)',  gridClassName,  children,  className,}: ElasticMeshProps) {  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

Elastic Mesh 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/elastic-mesh

MCP

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

ElasticMeshProps

Prop	Type	Default	What it does
`variant`	`'mesh' \| 'knots' \| 'both'`	`'both'`	Draw the mesh lines, the knots where they cross, or both.
`gap`	`number`	`30`	Distance between knots in CSS pixels.
`radius`	`number`	`220`	How far from the pointer the pull reaches, in CSS pixels.
`strength`	`number`	`1`	How hard knots are drawn towards the pointer. 1 is a firm pinch, negative values push them away.
`tension`	`number`	`1`	How quickly the mesh springs back. Below 1 it is looser and wobblier, above 1 it is tauter.
`drift`	`number`	`0.5`	A slow swell that keeps the mesh alive when nobody is touching it. 0 turns it off, 1 is a clear swell.
`trail`	`boolean`	`true`	A fading ribbon behind the pointer.
`ripple`	`boolean`	`true`	A press or tap sends a ripple through the mesh.
`color`	`string`	`'currentColor'`	Colour of the resting mesh. Any CSS colour; defaults to the text colour of `gridClassName`.
`accentColor`	`string`	`'var(--primary, #7c6cff)'`	Colour the mesh warms to where it is stretched, and the colour of the trail. Any CSS colour, including `var(--x)`.
`gridClassName`	`string`	–	Classes for the canvas layer, e.g. `text-foreground/60` to colour the resting mesh.
`children`	`ReactNode`	–	Content shown on top of the mesh.
`className`	`string`	–	–

Preview

Code

The code is locked

Props

A11y