HUA Docs - The Syntax of Emotion

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Marquee } from "@hua-labs/ui/advanced";

React

Next.js

TypeScript

Tailwind

Framer

Vercel

DesignDevelopDeployScaleIterate

FastReliableSecureModernBeautiful

— User 1

— User 2

— User 3

— User 4

— User 5


`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	docs:components.marquee.props.direction
`speed`	`number`	`50`	docs:components.marquee.props.speed
`pauseOnHover`	`boolean`	`true`	docs:components.marquee.props.pauseOnHover
`pauseOnClick`	`boolean`	`false`	docs:components.marquee.props.pauseOnClick
`gap`	`number`	`16`	docs:components.marquee.props.gap
`gradient`	`boolean`	`true`	docs:components.marquee.props.gradient
`gradientColor`	`string`	`"hsl(var(--background))"`	docs:components.marquee.props.gradientColor
`gradientWidth`	`number`	`100`	docs:components.marquee.props.gradientWidth

docs:common.basicUsagetsx

import { Marquee } from '@hua-labs/ui/advanced';

<Marquee speed={40} gradient>
  {logos.map(logo => (
    <LogoCard key={logo.name} {...logo} />
  ))}
</Marquee>

docs:components.marquee.demo.reverseDirectionCodetsx

<Marquee direction="right" speed={30}>
  {items.map(item => <ItemCard {...item} />)}
</Marquee>

docs:components.marquee.demo.verticalScrollCodetsx

<Marquee direction="up" speed={30} gradient={false}>
  {testimonials.map(t => <TestimonialCard {...t} />)}
</Marquee>

•docs:components.marquee.accessibility.pauseOnHoverLabel: docs:components.marquee.accessibility.pauseOnHoverValue
•docs:components.marquee.accessibility.duplicatedContentLabel: docs:components.marquee.accessibility.duplicatedContentValue

Parallax GlowCardPro