A.01
pointerhoverspringmotion
Magnetic Button
A button gently pulled toward the pointer inside a bounded magnetic field.
Buttons & Controls · React / Motion / Tailwind
Wancraft / Digital component workshop
Don’t just build interfaces. Craft experiences.
A growing collection of meticulously built React components, motion experiments, and interactive ideas. Ready to explore. Ready to remix.
- 01Built for React
- 02Open source
- 03Motion-ready
- 04Copy & own it
Hover an object to inspect · click to open its entry
02 / Selected crafts
Made to be explored.
Six pieces from the bench. Each preview is the shipped component, running live — hover, drag and tab through them before you open the details.
- B.06pointerhovertweenzero deps
Spotlight Card
A card that reveals a soft radial light — inner glow and border highlight — under the pointer.
Cards & Containers · React / CSS / Tailwind
- C.09viewportstaggerzero deps
Kinetic Headline
Display type that rises out of masks line by line, word by word or character by character.
Typography & Text · React / CSS / Tailwind
- E.17viewportcontinuouszero deps
Aurora Field
A fluid colour atmosphere of drifting, blurred light that fills its container.
Backgrounds & Effects · React / CSS / Tailwind
- D.13pointerhoverspringmotion
Interactive Dock
A navigation dock whose tiles rise and grow as the pointer approaches.
Navigation & Menus · React / Motion / Tailwind
- H.31dragclickspringmotion
3D Card Stack
A perspective card stack you can swipe, drag, click or arrow through — with spring physics.
3D & Experimental · React / Motion / Tailwind
03 / Behind the craft
Every detail is deliberate.
Three rules every component is held to before it earns a number in the catalogue.
- 01 /
Motion with meaning
Interactions communicate feedback and intent. A spring says ‘I followed you’. A stagger says ‘read in this order’. If motion doesn’t carry meaning, it doesn’t ship.
- 02 /
Code you can own
Readable source, transparent dependencies, easy integration. Each component is a single file you can read in one sitting — what you preview is exactly what you install.
import { MagneticButton } from "@/components/ui/magnetic-button" // dependencies: motion — that's it
- 03 /
Crafted for reality
Accessible, responsive, performant, maintainable. Keyboard paths, reduced-motion fallbacks, touch alternatives and off-screen pausing are part of the component, not a follow-up ticket.
- Keyboard operable
- Reduced motion
- Touch fallback
- Pauses off-screen
04 / How it works
From curiosity to commit.
One real component, five steps. This is the whole workflow — no account, no lock-in, no build step you don't control.
A.01 / magnetic-buttonStep 1 of 5
Magnetic Button
Buttons & Controls · Motion
05 / The playground
Turn the dials.
Every control below is wired to the real component. Change the label, the pull, the spring and the colour — then take your configuration to the full workbench.
Live · A.01
06 / Collections
Sets that belong together.
Curated combinations for the things people actually build: portfolios, dashboards, landing pages and experiments.
- 01Portfolio EssentialsKinetic Headline · Tilt Card · Expandable Project Card · Interactive Dock · +23 more
- 02Motion FundamentalsMagnetic Button · Split Text Button · Animated Counter · Morphing Tabs · +14 more
- 03Dashboard ToolkitMetric Ticker · Activity Heatmap · Interactive Chart Tooltip · Animated Toggle · +27 more
- 04Landing Page MagicAurora Field · Infinite Marquee · Spotlight Card · Gradient Reveal Text · +20 more
- 05Experimental LabParticle Sphere · Rotating Product Stage · Dot Matrix Field · Orbital Skills · +24 more
- 06Form CraftFloating Label Input · Animated OTP Input · Multi-Step Form · Tag Input · +25 more
- 07Tactile ControlsRotary Knob · Elastic Slider · Hold to Confirm · Copy Button · +16 more
- 08WayfindingInteractive Dock · Command Menu · Scroll Progress Navbar · Radial Menu · +25 more
- 09Editorial TypeKinetic Headline · Text Scramble · Gradient Reveal Text · Infinite Marquee · +24 more
- 10Micro-Interaction ToolkitCopy Button · Reaction Button · Stateful Submit Button · Number Stepper · +17 more
- 11Three-Dimensional InterfacesRotating Product Stage · 3D Card Stack · Ring Carousel · Isometric Grid · +13 more
- 12Mobile PatternsMobile Tab Bar · Bottom Sheet · Swipe to Confirm · Wheel Picker · +14 more
- 13AtmospheresAurora Field · Dot Matrix Field · Noise Grid · Flow Field · +15 more
- 14App Builder KitKanban Board · Resizable Panels · Collapsible Sidebar · Command Menu · +17 more
- 15Commerce EssentialsPricing Toggle · Card Input · Number Stepper · Rating Input · +10 more
- 16Content & ReadingSidenotes · Read More · Scrollspy TOC · Scroll Progress Navbar · +9 more
- 17Overlays & LayersAnimated Dialog · Side Drawer · Bottom Sheet · Smart Tooltip · +9 more
- 18Media & StoriesStory Viewer · Lightbox Gallery · Snap Carousel · Coverflow · +5 more
- 19Developer ToolsCode Walkthrough · Text Diff · Kbd Shortcut · Command Menu · +6 more
07 / The studio
Crafted at WANSTUDIO.
Wancraft is the open workshop of WANSTUDIO's creative engineering practice — the place where interaction ideas from client work are distilled into components anyone can use. Same standards, published in the open.
Visit wanstudio.my