REFERENCE
- Gallery page: https://magpui.com/en/i/elastic-draggable-header-badge-57eec3
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/elastic-draggable-header-badge-57eec3/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/elastic-draggable-header-badge-57eec3/clip.mp4
- Original post: https://x.com/x6sense/status/2111438501250310509 by @x6sense
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Create only a playful draggable badge for the top-left corner of an existing header. A black circular sticker with oversized white placeholder letters rotates and deforms into a soft irregular blob during interaction, then resolves back into a circle. Keep it a small optional delight, not the primary navigation.
DESIGN SYSTEM: Use an approximately 88px diameter badge, inset 32px from the header edges. Set three or four bold neo-grotesk capitals around 36px, arranged as an irregular compact cluster. Black #111111 silhouette and white #FFFFFF letters. The observed surrounding panel has a lime #ECFF70 to cream #FAFAEE vertical gradient and a dark 4px top/left border with a small rounded corner; use that only for the demonstration container, not an entire page. No shadow on the badge.
MOTION: Rebuild the observed changing rotations, offset letters and indented silhouette as a pointer-driven elastic interaction. Treat timing as implementation targets: on grab, deform over 160ms with cubic-bezier(0.2,0.8,0.2,1); during drag, translate directly with the pointer and use velocity to rotate up to 70deg and stretch up to 1.18, compressing the opposite axis to 0.86. Offset individual letters by 3–8px and rotate them independently up to 25deg. On release, return toward the anchor over approximately 700ms with cubic-bezier(0.16,1.35,0.3,1), followed by a 180ms settling phase with cubic-bezier(0.2,0.8,0.2,1). Avoid continuous idle motion.
SECTIONS: One header anchor, a visible irregular silhouette and independently transformed letter layer. States: resting round badge; hover/grab affordance; dragging with elastic outline and rotating typography; release and return. Keep the actual link target independent of the drag gesture, preventing navigation after a drag.
IMPLEMENTATION: Use React and Motion for pointer capture, transform values, velocity and damped return. Draw the outline as an SVG path with equal point counts across circular and softly indented shapes; interpolate control points from the gesture rather than scaling the text with the outline. Use requestAnimationFrame and transforms, no layout reads per pointer event. Support touch with touch-action restricted to the badge; clamp travel within the header. Give the interactive control an accessible name, visible keyboard focus and an Enter/Space-triggered short wobble. Under prefers-reduced-motion, keep a static circular badge and use a color/focus response instead.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map these colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use neutral placeholder initials and a new letter arrangement.
SUCCESS CHECK:
- The silhouette and letters can deform and rotate separately while the badge stays recognizable.
- Releasing after a fast drag returns the badge cleanly to its header anchor without triggering a link.
- Touch, keyboard focus and reduced-motion mode remain usable without layout shifts.
