3d Marquee

import { Marquee3D, Marquee3DFloating, Marquee3DPreset } from '@hanzo/ui'

export function Default() {
  return (
    <Marquee3D autoFill rotateX={-6} gap={32}>
      <span>🚀 Innovation</span>
      <span>⚡ Speed</span>
      <span>💎 Quality</span>
      <span>🎯 Precision</span>
      <span>🌟 Excellence</span>
    </Marquee3D>
  )
}

export function Presets() {
  return (
    <YStack gap="$3">
      <Marquee3DPreset.Hero autoFill gap={48}>HANZO</Marquee3DPreset.Hero>
      <Marquee3DPreset.Neon autoFill gap={48}>NEON NIGHTS</Marquee3DPreset.Neon>
      <Marquee3DPreset.Metallic autoFill gap={48}>BRUSHED STEEL</Marquee3DPreset.Metallic>
      <Marquee3DPreset.Fire autoFill gap={48}>ON FIRE</Marquee3DPreset.Fire>
      <Marquee3DPreset.Glass autoFill gap={48}>FROSTED</Marquee3DPreset.Glass>
    </YStack>
  )
}

export function Vertical() {
  return (
    <Marquee3D direction="up" variant="glass" size="lg" gap={12} gradient gradientWidth={16}>
      <span>Alpha</span>
      <span>Beta</span>
      <span>Gamma</span>
    </Marquee3D>
  )
}

export function PauseOnHover() {
  return (
    <Marquee3D autoFill gap={24} pauseOnHover>
      <span>Hover to pause</span>
    </Marquee3D>
  )
}

export function Floating() {
  return (
    <Marquee3DFloating autoFill variant="rainbow" size="2xl" gap={64} floatIntensity={8}>
      HANZO UI
    </Marquee3DFloating>
  )
}

Types

export type Marquee3DVariant = 'default' | 'neon' | 'rainbow' | 'metallic' | 'fire' | 'glass'

export type Marquee3DSize = 'sm' | 'default' | 'lg' | 'xl' | '2xl' | '3xl'

export type Marquee3DDirection = 'left' | 'right' | 'up' | 'down'

export type Marquee3DPerspective = 'none' | 'sm' | 'default' | 'lg' | 'xl'

export type Marquee3DProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
  children: React.ReactNode
  variant?: Marquee3DVariant
  size?: Marquee3DSize
  direction?: Marquee3DDirection
  perspective?: Marquee3DPerspective
  /** Track travel, px/s. */
  speed?: number
  pauseOnHover?: boolean
  /** Run against `direction`. */
  reverse?: boolean
  /** How many times `children` is laid out per loop. */
  repeat?: number
  /** Lay `children` out as many times as it takes to cover the frame, whatever `repeat` says. */
  autoFill?: boolean
  /** Space between items, px — across the loop's seam too. */
  gap?: number
  rotateX?: number
  rotateY?: number
  rotateZ?: number
  /** Fade both ends of the frame. */
  gradient?: boolean
  gradientColor?: string
  /** Length of each fade, px. */
  gradientWidth?: number
  style?: React.CSSProperties
}

export type Marquee3DFloatingProps = Marquee3DProps & {
  /** Peak lift of each glyph, px. */
  floatIntensity?: number
  /** Seconds per bob. */
  floatSpeed?: number
}

Exports