HUA Docs - The Syntax of Emotion

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { GlowCard, SpotlightCard, TiltCard } from "@hua-labs/ui/advanced";

Pro

$9/mo

$29/mo


`glowColor`	`string`	`"rgba(120, 119, 198, 0.3)"`	docs:components.glowCard.props.glowCard.glowColor
`glowSize`	`number`	`400`	docs:components.glowCard.props.glowCard.glowSize
`glowOpacity`	`number`	`0.6`	docs:components.glowCard.props.glowCard.glowOpacity
`border`	`boolean`	`true`	docs:components.glowCard.props.glowCard.border
`borderColor`	`string`	`glowColor`	docs:components.glowCard.props.glowCard.borderColor

Pro


`spotlightColor`	`string`	`"rgba(255, 255, 255, 0.1)"`	docs:components.glowCard.props.spotlightCard.spotlightColor
`spotlightSize`	`number`	`300`	docs:components.glowCard.props.spotlightCard.spotlightSize
`gradient`	`boolean`	`true`	docs:components.glowCard.props.spotlightCard.gradient

Pro


`maxTilt`	`number`	`15`	docs:components.glowCard.props.tiltCard.maxTilt
`perspective`	`number`	`1000`	docs:components.glowCard.props.tiltCard.perspective
`scale`	`number`	`1.02`	docs:components.glowCard.props.tiltCard.scale
`speed`	`number`	`400`	docs:components.glowCard.props.tiltCard.speed
`glare`	`boolean`	`true`	docs:components.glowCard.props.tiltCard.glare
`maxGlare`	`number`	`0.3`	docs:components.glowCard.props.tiltCard.maxGlare
`reset`	`boolean`	`true`	docs:components.glowCard.props.tiltCard.reset

GlowCardtsx

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

<GlowCard glowColor="rgba(59, 130, 246, 0.4)" className="p-6">
  <h3>Starter Plan</h3>
  <p>Perfect for personal projects</p>
  <div className="text-3xl font-bold">$9/mo</div>
</GlowCard>

SpotlightCardtsx

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

<SpotlightCard className="p-6">
  <div className="text-3xl mb-3">🚀</div>
  <h3 className="font-bold text-white">Fast</h3>
  <p className="text-sm text-gray-400">Optimized performance</p>
</SpotlightCard>

TiltCardtsx

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

<TiltCard className="w-72 bg-white rounded-2xl shadow-2xl">
  <div className="h-40 bg-gradient-to-br from-violet-500 to-purple-600" />
  <div className="p-6">
    <h3>Premium Card</h3>
    <p>Move your mouse to see the 3D effect</p>
  </div>
</TiltCard>

•docs:components.glowCard.accessibility.visualEnhancement: docs:components.glowCard.accessibility.visualEnhancementDesc
•docs:common.accessibility.reducedMotion: docs:components.glowCard.accessibility.reducedMotionDesc

Marquee AnimatedGradient