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

Charge Border

borderPro

Ein knisternder elektrischer Rahmen um beliebigen Inhalt, zweimal entlang eines vom Rauschen verschobenen Pfads gezeichnet: einmal als Leuchten, einmal als scharfer Kern.

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.

charge-border.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type ChargeBorderProps = {  children?: ReactNode  color?: string  glowColor?: string  chaos?: number  speed?: number  thickness?: number  glow?: number  radius?: number  bleed?: number  active?: boolean  seed?: number  className?: string}export function ChargeBorder({  children,  color = 'currentColor',  glowColor,  chaos = 0.55,  speed = 1,  thickness = 1.5,  glow = 1,  radius = 16,  bleed = 28,  active = true,  seed = 7,  className,}: ChargeBorderProps) {  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

Charge Border 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/charge-border

MCP

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

ChargeBorderProps

Prop	Typ	Standard	Was sie tut
`children`	`ReactNode`	–	The content to wrap. The border takes the size of this content (or of the `className` size) and follows it when it resizes.
`className`	`string`	–	Extra classes for the wrapper. Size, padding and background of the framed content go here.
`color`	`string`	`'currentColor'`	Colour of the crisp core line. Any CSS colour, including `currentColor` and `var(--x)`. The core is drawn brighter than this colour.
`glowColor`	`string`	–	Colour of the glow around the line. Defaults to `color`.
`chaos`	`number`	`0.55`	How wild the crackle is, from 0 (a calm, wavy line) to 1 (violent, spiky).
`speed`	`number`	`1`	How fast the line changes, 1 is a lively crackle.
`thickness`	`number`	`1.5`	Width of the core line in CSS pixels.
`glow`	`number`	`1`	How strong the glow is, from 0 (none) to 2 (a heavy bloom).
`radius`	`number`	`16`	Corner radius of the frame in CSS pixels. It is also applied to the wrapper, so the content can be clipped to match.
`bleed`	`number`	`28`	Extra room around the frame for the glow and the crackle to spill into, in CSS pixels. Costs nothing in layout.
`active`	`boolean`	`true`	Turn the crackle on or off. It fades in and out and the loop sleeps while it is off, handy for "charge on hover".
`seed`	`number`	`7`	Seed for the noise, so several borders next to each other do not crackle in unison.

Vorschau

Code

Der Code ist gesperrt

Props

A11y