.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

Et fjedrende linjegitter bag indholdet, der trækker sig sammen mod markøren, sender en bølge ved tryk og efterlader et glødende spor.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

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

Koden er låst

Elastic Mesh er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

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	Standard	Hvad den gør
`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

Kode

Koden er låst

Props

A11y