@luanlu/mk-motion 1.2.0 → 1.2.1

package/src/interactive/cursor-trail.ts

@@ -0,0 +1,113 @@
+export interface CursorTrailOptions {
+  count?: number           // 粒子数量
+  color?: string
+  size?: number
+  fadeSpeed?: number       // 淡出速度
+  smoothing?: number       // 平滑度 0~1
+}
+
+const DEFAULT_TRAIL: Required<CursorTrailOptions> = {
+  count: 15,
+  color: '#38bdf8',
+  size: 8,
+  fadeSpeed: 0.92,
+  smoothing: 0.15,
+}
+
+interface TrailDot {
+  el: HTMLElement
+  x: number
+  y: number
+  targetX: number
+  targetY: number
+  opacity: number
+}
+
+/**
+ * 鼠标跟随粒子拖尾
+ */
+export function cursorTrail(options: CursorTrailOptions = {}): () => void {
+  const opts = { ...DEFAULT_TRAIL, ...options }
+
+  const dots: TrailDot[] = []
+  const container = document.createElement('div')
+  container.style.cssText = `
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9998;
+    overflow: hidden;
+  `
+  document.body.appendChild(container)
+
+  for (let i = 0; i < opts.count; i++) {
+    const el = document.createElement('div')
+    el.style.cssText = `
+      position: absolute;
+      width: ${opts.size}px;
+      height: ${opts.size}px;
+      border-radius: 50%;
+      background: ${opts.color};
+      opacity: 0;
+      pointer-events: none;
+    `
+    container.appendChild(el)
+    dots.push({
+      el,
+      x: -100,
+      y: -100,
+      targetX: -100,
+      targetY: -100,
+      opacity: 0,
+    })
+  }
+
+  let mouseX = -100
+  let mouseY = -100
+  let running = true
+
+  const onMove = (e: MouseEvent) => {
+    mouseX = e.clientX
+    mouseY = e.clientY
+  }
+
+  document.addEventListener('mousemove', onMove)
+
+  const tick = () => {
+    if (!running) return
+
+    dots.forEach((dot, i) => {
+      if (i === 0) {
+        dot.targetX = mouseX
+        dot.targetY = mouseY
+      } else {
+        dot.targetX = dots[i - 1].x
+        dot.targetY = dots[i - 1].y
+      }
+
+      dot.x += (dot.targetX - dot.x) * opts.smoothing
+      dot.y += (dot.targetY - dot.y) * opts.smoothing
+
+      if (mouseX > 0) {
+        dot.opacity = Math.min(1, dot.opacity + 0.1)
+      }
+      dot.opacity *= opts.fadeSpeed
+
+      const size = opts.size * (1 - i / opts.count * 0.6)
+      dot.el.style.transform = `translate(${dot.x - size / 2}px, ${dot.y - size / 2}px)`
+      dot.el.style.width = `${size}px`
+      dot.el.style.height = `${size}px`
+      dot.el.style.opacity = String(dot.opacity)
+    })
+
+    requestAnimationFrame(tick)
+  }
+
+  requestAnimationFrame(tick)
+
+  return () => {
+    running = false
+    document.removeEventListener('mousemove', onMove)
+    container.remove()
+  }
+}

package/src/interactive/flip-card.ts

@@ -0,0 +1,114 @@
+export interface FlipCardOptions {
+  axis?: 'x' | 'y'         // 翻转轴
+  duration?: number        // 翻转时长
+  perspective?: number     // 透视距离
+}
+
+const DEFAULT_FLIP: Required<FlipCardOptions> = {
+  axis: 'y',
+  duration: 600,
+  perspective: 1000,
+}
+
+export class FlipCard {
+  private container: HTMLElement
+  private inner: HTMLElement
+  private front: HTMLElement
+  private back: HTMLElement
+  private flipped = false
+  private options: Required<FlipCardOptions>
+
+  constructor(
+    container: HTMLElement | string,
+    options: FlipCardOptions = {}
+  ) {
+    this.container =
+      typeof container === 'string'
+        ? document.querySelector<HTMLElement>(container)!
+        : container
+
+    if (!this.container) {
+      throw new Error('FlipCard: container not found')
+    }
+
+    this.options = { ...DEFAULT_FLIP, ...options }
+
+    // 自动创建内部结构
+    this.container.style.perspective = `${this.options.perspective}px`
+    this.container.style.cursor = 'pointer'
+
+    this.inner = document.createElement('div')
+    this.inner.style.cssText = `
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform-style: preserve-3d;
+      transition: transform ${this.options.duration}ms cubic-bezier(0.4, 0, 0.2, 1);
+    `
+
+    // 查找 front 和 back
+    this.front = this.container.querySelector('[data-flip="front"]') as HTMLElement
+    this.back = this.container.querySelector('[data-flip="back"]') as HTMLElement
+
+    if (!this.front || !this.back) {
+      throw new Error('FlipCard: 需要包含 data-flip="front" 和 data-flip="back" 的子元素')
+    }
+
+    const common = `
+      position: absolute;
+      inset: 0;
+      backface-visibility: hidden;
+      -webkit-backface-visibility: hidden;
+    `
+    this.front.style.cssText += common
+    this.back.style.cssText += common
+
+    if (this.options.axis === 'y') {
+      this.back.style.transform = 'rotateY(180deg)'
+    } else {
+      this.back.style.transform = 'rotateX(180deg)'
+    }
+
+    this.inner.appendChild(this.front)
+    this.inner.appendChild(this.back)
+    this.container.innerHTML = ''
+    this.container.appendChild(this.inner)
+
+    this.container.addEventListener('click', () => this.toggle())
+  }
+
+  toggle(): this {
+    this.flipped = !this.flipped
+    const rotate = this.flipped ? 180 : 0
+    if (this.options.axis === 'y') {
+      this.inner.style.transform = `rotateY(${rotate}deg)`
+    } else {
+      this.inner.style.transform = `rotateX(${rotate}deg)`
+    }
+    return this
+  }
+
+  flipToFront(): this {
+    this.flipped = false
+    this.inner.style.transform = ''
+    return this
+  }
+
+  flipToBack(): this {
+    this.flipped = true
+    const rotate = 180
+    if (this.options.axis === 'y') {
+      this.inner.style.transform = `rotateY(${rotate}deg)`
+    } else {
+      this.inner.style.transform = `rotateX(${rotate}deg)`
+    }
+    return this
+  }
+}
+
+export function createFlipCard(
+  container: HTMLElement | string,
+  options?: FlipCardOptions
+): FlipCard {
+  return new FlipCard(container, options)
+}

package/src/interactive/magnetic.ts

@@ -0,0 +1,121 @@
+export interface MagneticOptions {
+  strength?: number        // 磁力强度 0~1
+  radius?: number          // 作用半径像素
+}
+
+const DEFAULT_MAGNETIC: Required<MagneticOptions> = {
+  strength: 0.4,
+  radius: 150,
+}
+
+/**
+ * 磁性按钮：鼠标靠近时被吸引
+ */
+export function magnetic(
+  element: HTMLElement | string,
+  options: MagneticOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('magnetic: element not found')
+
+  const opts = { ...DEFAULT_MAGNETIC, ...options }
+  el.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)'
+
+  const onMove = (e: MouseEvent) => {
+    const rect = el.getBoundingClientRect()
+    const centerX = rect.left + rect.width / 2
+    const centerY = rect.top + rect.height / 2
+
+    const distX = e.clientX - centerX
+    const distY = e.clientY - centerY
+    const distance = Math.sqrt(distX * distX + distY * distY)
+
+    if (distance < opts.radius) {
+      const force = 1 - distance / opts.radius
+      const moveX = distX * opts.strength * force
+      const moveY = distY * opts.strength * force
+      el.style.transform = `translate(${moveX}px, ${moveY}px)`
+    } else {
+      el.style.transform = ''
+    }
+  }
+
+  const onLeave = () => {
+    el.style.transform = ''
+  }
+
+  document.addEventListener('mousemove', onMove)
+  el.addEventListener('mouseleave', onLeave)
+
+  return () => {
+    document.removeEventListener('mousemove', onMove)
+    el.removeEventListener('mouseleave', onLeave)
+    el.style.transform = ''
+    el.style.transition = ''
+  }
+}
+
+/**
+ * 磁性文字：每个字符独立被吸引
+ */
+export function magneticText(
+  element: HTMLElement | string,
+  options: MagneticOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('magneticText: element not found')
+
+  const text = el.textContent ?? ''
+  el.innerHTML = ''
+  el.style.display = 'inline-block'
+
+  const chars: HTMLElement[] = []
+  text.split('').forEach((char) => {
+    const span = document.createElement('span')
+    span.textContent = char === ' ' ? '\u00A0' : char
+    span.style.display = 'inline-block'
+    span.style.transition = 'transform 0.3s ease'
+    el.appendChild(span)
+    chars.push(span)
+  })
+
+  const opts = { ...DEFAULT_MAGNETIC, ...options }
+
+  const onMove = (e: MouseEvent) => {
+    chars.forEach((span) => {
+      const rect = span.getBoundingClientRect()
+      const cx = rect.left + rect.width / 2
+      const cy = rect.top + rect.height / 2
+      const dx = e.clientX - cx
+      const dy = e.clientY - cy
+      const dist = Math.sqrt(dx * dx + dy * dy)
+
+      if (dist < opts.radius) {
+        const force = 1 - dist / opts.radius
+        span.style.transform = `translate(${dx * opts.strength * force}px, ${dy * opts.strength * force}px)`
+      } else {
+        span.style.transform = ''
+      }
+    })
+  }
+
+  const onLeave = () => {
+    chars.forEach((span) => (span.style.transform = ''))
+  }
+
+  document.addEventListener('mousemove', onMove)
+  el.addEventListener('mouseleave', onLeave)
+
+  return () => {
+    document.removeEventListener('mousemove', onMove)
+    el.removeEventListener('mouseleave', onLeave)
+  }
+}

package/src/micro/hover-lift.ts

@@ -0,0 +1,94 @@
+export interface HoverLiftOptions {
+  y?: number            // 悬浮时向上移动像素
+  scale?: number        // 悬浮时放大比例
+  shadow?: string       // 悬浮时阴影
+  duration?: number     // 过渡时长毫秒
+  easing?: string       // 缓动
+}
+
+const DEFAULT_HOVER: Required<HoverLiftOptions> = {
+  y: -6,
+  scale: 1.02,
+  shadow: '0 12px 24px rgba(0,0,0,0.15)',
+  duration: 250,
+  easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+}
+
+/**
+ * 给元素添加悬浮抬升效果
+ */
+export function hoverLift(
+  element: HTMLElement | string,
+  options: HoverLiftOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('hoverLift: element not found')
+
+  const opts = { ...DEFAULT_HOVER, ...options }
+
+  el.style.transition = `transform ${opts.duration}ms ${opts.easing}, box-shadow ${opts.duration}ms ${opts.easing}`
+
+  const onEnter = () => {
+    el.style.transform = `translateY(${opts.y}px) scale(${opts.scale})`
+    el.style.boxShadow = opts.shadow
+  }
+
+  const onLeave = () => {
+    el.style.transform = ''
+    el.style.boxShadow = ''
+  }
+
+  el.addEventListener('mouseenter', onEnter)
+  el.addEventListener('mouseleave', onLeave)
+
+  return () => {
+    el.removeEventListener('mouseenter', onEnter)
+    el.removeEventListener('mouseleave', onLeave)
+    el.style.transition = ''
+    el.style.transform = ''
+    el.style.boxShadow = ''
+  }
+}
+
+/**
+ * 给元素添加悬浮发光效果
+ */
+export function hoverGlow(
+  element: HTMLElement | string,
+  color: string = 'rgba(56, 189, 248, 0.4)',
+  options?: Pick<HoverLiftOptions, 'duration' | 'easing'>
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('hoverGlow: element not found')
+
+  const duration = options?.duration ?? 250
+  const easing = options?.easing ?? 'ease'
+
+  el.style.transition = `box-shadow ${duration}ms ${easing}`
+
+  const onEnter = () => {
+    el.style.boxShadow = `0 0 20px ${color}`
+  }
+
+  const onLeave = () => {
+    el.style.boxShadow = ''
+  }
+
+  el.addEventListener('mouseenter', onEnter)
+  el.addEventListener('mouseleave', onLeave)
+
+  return () => {
+    el.removeEventListener('mouseenter', onEnter)
+    el.removeEventListener('mouseleave', onLeave)
+    el.style.transition = ''
+    el.style.boxShadow = ''
+  }
+}

package/src/micro/ripple.ts

@@ -0,0 +1,130 @@
+export interface RippleOptions {
+  color?: string        // 波纹颜色
+  duration?: number     // 动画时长毫秒
+  maxScale?: number     // 最大缩放倍数
+}
+
+const DEFAULT_RIPPLE: Required<RippleOptions> = {
+  color: 'rgba(255, 255, 255, 0.35)',
+  duration: 600,
+  maxScale: 2.5,
+}
+
+/**
+ * 给元素添加 Material Design 风格的水波纹点击效果
+ */
+export function addRipple(
+  element: HTMLElement | string,
+  options: RippleOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('addRipple: element not found')
+
+  el.style.position = 'relative'
+  el.style.overflow = 'hidden'
+
+  const opts = { ...DEFAULT_RIPPLE, ...options }
+
+  const handler = (e: MouseEvent) => {
+    const rect = el.getBoundingClientRect()
+    const size = Math.max(rect.width, rect.height)
+    const x = e.clientX - rect.left - size / 2
+    const y = e.clientY - rect.top - size / 2
+
+    const ripple = document.createElement('span')
+    ripple.style.cssText = `
+      position: absolute;
+      border-radius: 50%;
+      background: ${opts.color};
+      width: ${size}px;
+      height: ${size}px;
+      left: ${x}px;
+      top: ${y}px;
+      pointer-events: none;
+      transform: scale(0);
+      opacity: 1;
+    `
+
+    el.appendChild(ripple)
+
+    const anim = ripple.animate(
+      [
+        { transform: 'scale(0)', opacity: 1 },
+        { transform: `scale(${opts.maxScale})`, opacity: 0 },
+      ],
+      {
+        duration: opts.duration,
+        easing: 'ease-out',
+      }
+    )
+
+    anim.onfinish = () => {
+      ripple.remove()
+    }
+  }
+
+  el.addEventListener('click', handler)
+
+  return () => {
+    el.removeEventListener('click', handler)
+  }
+}
+
+/**
+ * 一次性水波纹（不绑定事件，立即播放）
+ */
+export function rippleEffect(
+  element: HTMLElement | string,
+  options: RippleOptions = {}
+): Promise<void> {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('rippleEffect: element not found')
+
+  const opts = { ...DEFAULT_RIPPLE, ...options }
+  const rect = el.getBoundingClientRect()
+  const size = Math.max(rect.width, rect.height)
+
+  const ripple = document.createElement('span')
+  ripple.style.cssText = `
+    position: absolute;
+    border-radius: 50%;
+    background: ${opts.color};
+    width: ${size}px;
+    height: ${size}px;
+    left: ${rect.width / 2 - size / 2}px;
+    top: ${rect.height / 2 - size / 2}px;
+    pointer-events: none;
+    transform: scale(0);
+    opacity: 1;
+  `
+
+  el.style.position = 'relative'
+  el.style.overflow = 'hidden'
+  el.appendChild(ripple)
+
+  return new Promise((resolve) => {
+    const anim = ripple.animate(
+      [
+        { transform: 'scale(0)', opacity: 1 },
+        { transform: `scale(${opts.maxScale})`, opacity: 0 },
+      ],
+      {
+        duration: opts.duration,
+        easing: 'ease-out',
+      }
+    )
+
+    anim.onfinish = () => {
+      ripple.remove()
+      resolve()
+    }
+  })
+}