Lanyard
A badge hanging from a strap that swings with real pendulum physics and flips to its back as it turns.
Press pass
Drag the badge and it swings on the strap. Turn it far enough and the back comes round.
Mira Halvorsen
Level 3
Showing the front of the pass.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useRef,7 useState,8 type HTMLAttributes,9 type PointerEvent as ReactPointerEvent,10 type ReactNode,11} from "react";12 13export type LanyardProps = Omit<14 HTMLAttributes<HTMLDivElement>,15 "children" | "onChange"16> & {17 /** The content on the front of the badge. */18 front: ReactNode;19 /** The content on the back of the badge. */20 back?: ReactNode;21 /** Accessible name for the badge. */22 label?: string;23 /** The strap length in pixels; it sets the swing period. */24 strapLength?: number;25 /** The pull of gravity, in pixels per second squared. */26 gravity?: number;27 /** How quickly the swing loses energy. */28 damping?: number;