Jiejoe Design

JIEJOE Design（蒸馏）

Interaction-motion design distilled from JIEJOE's web tutorial work: magnetic pointer physics, SVG stroke and wave effects, scroll-driven choreography, and personality-loaded loading and transition screens. Use it together with the installed GSAP skills (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins) and motion-contract.md for presets.

Motion pattern library

Magnetic interactions

• Magnetic cursor: on hover, the pointer box-selects and sticks to a control within its range; moving inside the control keeps the cursor locked to it.
• Magnetic repulsion: elements around the pointer repel or orbit it, bounded to a constrained travel range (for example a grid of dots tethered by a line).
• Keyboard and touch equivalence: a magnetic hover effect is decorative for pointer users only; keyboard and touch users still get visible focus and active states.

SVG effects

• Stroke animation: draw a path or button outline with stroke-dasharray / stroke-dashoffset over a short, stated duration.
• Wave and interference: pointer-driven displacement of vertical SVG paths, with elasticity, damping, and easing so lines feel physical, not scripted.

Scroll-driven motion (ScrollTrigger)

• Horizontal scroll: position: sticky plus ScrollTrigger converts vertical scroll into pinned horizontal progression; this is more stable than transform-only approaches and adapts to responsive sizes.
• Slide-follow and infinite scrolling variants; keep keyboard access and reduced-motion static final states.

Loading and transitions

• Loading animations with personality: snake, slash-sweep, or window-blinds reveals; they replace a spinner without delaying content.
• Page-jump transition: a continuous transition between views (for example refresh-free SPA navigation) rather than a disconnected reload animation.

Technical rules

• GSAP first: use gsap-timeline and gsap-scrolltrigger for sequencing and scroll choreography. CSS transition is acceptable only for simple feedback; note when GSAP would give better performance and control.
• Physical parameters: state elasticity, damping, and easing explicitly for any simulated-physics effect; do not claim physics without named parameters.
• Reference-first: find a proven CodePen or live-site effect, simplify it, and land the adaptation with the target stack; record the source and adaptation boundary instead of copying restricted code.
• Performance: animate transform and opacity; never animate layout properties; keep interruptions and rapid reversals correct; reduced-motion renders the complete static final state.

Style principles

• Physical intuition: interactions feel magnetic, inertial, or elastic — real feedback, not decoration.
• Surprise and guidance: entry motion (loading, transition) has personality but never hides or delays the content.
• Restraint: motion serves the interaction intent; one memorable effect beats a stack of loops.
• Consistency: honor motion-contract.md — feedback within 150ms, no transition: all, prefers-reduced-motion as a static snapshot.

Self-check

• Is this effect "physical intuition" or a "decorative loop"?
• Does the pointer-driven effect have a keyboard or touch equivalent?
• Under reduced motion, is the page still a complete static snapshot?
• Is a mature reference named, and its adaptation and license boundary recorded?