Lanyard
lanyardSimulates a draggable hanging badge with a bending cord and spring return.
Usage
Basic usage
Put it into the relative positioning container. The component comes with a placeholder badge - drag it and let go to see the physical rebound and swing.
Hulian · HULIAN
Drag to swing
<div
className="relative h-80 overflow-hidden rounded-xl"
style={{ background: "oklch(0.16 0.02 255)" }}
>
<Lanyard className="absolute inset-0" />
</div>Customize work badge content
Passed children to replace the placeholder badge, and the lanyard physics and drag behavior remain unchanged.
Lin Yu
Front-end Engineer · No.0421
<Lanyard className="absolute inset-0">
<div className="w-44 rounded-xl border border-border bg-surface p-4 text-center shadow-lg">
<div className="mx-auto mb-3 size-14 rounded-full bg-gradient-to-br from-primary/30 to-primary/5" />
<p className="text-sm font-semibold text-foreground">Lin Yu</p>
<p className="mt-0.5 text-xs text-muted">Front-end engineer · No.0421</p>
</div>
</Lanyard>Soft heave
Long rope + low stiffness + high damping, the remaining swing is longer and softer after letting go.
Slow shake work card
Drag and let go to see the rest of the swing
<Lanyard
className="absolute inset-0"
ropeLength={160}
stiffness={0.025}
damping={0.965}
title="Slow Shake Gongpai"
subtitle="Drag and let go to see the remaining swing"
/>Customized rope color
ropeColor accepts any CSS color (token must be prefixed with --color-).
VIP
Orange Lanyard
<Lanyard
className="absolute inset-0"
ropeColor="oklch(0.72 0.2 45)"
title="VIP"
subtitle="Orange Lanyard"
/>When to Use
Use it for a draggable badge that swings on a damped spring and bends its strap with the current angle, such as on a personal site, team page, or playful hero. Use GlareHover for a reflected hover highlight or BorderBeam for a moving border light. Any children can fill the front of the badge.
Import
import { Lanyard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| ropeLength | number | 120 | Lanyard length px (the resting distance from the top anchor point to the industrial plate hook), the larger the swing, the more stretch and the slower the rebound |
| ropeColor | string | var(--color-primary) | Lanyard color, the token of the SVG stroke must be prefixed with --color- |
| stiffness | number | 0.045 | Rebound stiffness (spring constant), the larger, the faster and harder it will return to normal, it is recommended to be 0.02–0.12 |
| damping | number | 0.92 | Damping (speed attenuation per frame), the closer it is to 1, the longer the swing, it is recommended to be 0.85–0.97 |
| title | string | "\u745a\u740f \u00b7 HULIAN" ("Hulian · HULIAN") | Placeholder badge title (only displayed when children are not passed) |
| subtitle | string | "\u62d6\u52a8\u6446\u4e00\u6446" ("Drag to swing") | Placeholder badge subtitle (only displayed when children are not passed) |
| className | string | — | Root container className |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | The front content of the work badge; if not passed, the placeholder badge will be rendered |
Usage Guidelines
- The work badges are hung by absolute positioning. The root container must be
relative overflow-hiddenand have a clear height, otherwise the work badges will overflow or be positioned incorrectly (showcases must always beclassName="absolute inset-0"with a fixed height stage). ropeColorFeed SVG stroke, the token must be prefixed with--color-, and barevar(--primary)does not resolve. See [[hulian-token-color-var-needs-color-prefix]].- Client component (PointerEvents + RAF physical loop), no swing under SSR; under reduced-motion, let go and return to position immediately, without any residual swing.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
Hulian · HULIAN
Drag to swing
<div className="relative h-80 overflow-hidden rounded-xl"
style={{ background: "oklch(0.16 0.02 255)" }}>
<Lanyard
className="absolute inset-0"
ropeLength={120}
stiffness={0.045}
damping={0.92}
/>
</div>