Dark components with hover-based shine effects
import { Shiny } from "../Shiny"
export default function Example() {
return (
<div className="flex flex-wrap items-center justify-center gap-4">
<button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
<Shiny className="w-40 bg-zinc-700 py-3.5">
<span className="relative bg-gradient-to-b from-zinc-50/90 to-zinc-50/60 bg-clip-text text-transparent">
Zinc Button
</span>
</Shiny>
</button>
<button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
<Shiny className="w-40 bg-slate-700 py-3.5">
<span className="relative bg-gradient-to-b from-slate-50/90 to-slate-50/60 bg-clip-text text-transparent">
Slate Button
</span>
</Shiny>
</button>
<button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
<Shiny className="w-40 bg-red-800 py-3.5">
<span className="relative bg-gradient-to-b from-red-50/90 to-red-50/60 bg-clip-text text-transparent">
Red Button
</span>
</Shiny>
</button>
<button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
<Shiny className="w-40 bg-green-800 py-3.5">
<span className="relative bg-gradient-to-b from-green-50/90 to-green-50/60 bg-clip-text text-transparent">
Green Button
</span>
</Shiny>
</button>
</div>
)
}
import { Shiny } from "../Shiny"
export default function Example() {
return (
<div className="flex flex-wrap items-center justify-center gap-4">
<div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
<Shiny className="bg-zinc-700 px-3 py-1">
<span className="relative block bg-gradient-to-b from-zinc-50/90 to-zinc-50/60 bg-clip-text text-sm text-transparent">
Badge
</span>
</Shiny>
</div>
<div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
<Shiny className="bg-slate-700 px-3 py-1">
<span className="relative block bg-gradient-to-b from-slate-50/90 to-slate-50/60 bg-clip-text text-sm text-transparent">
Badge
</span>
</Shiny>
</div>
<div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
<Shiny className="bg-red-800 px-3 py-1">
<span className="relative block bg-gradient-to-b from-red-50/90 to-red-50/60 bg-clip-text text-sm text-transparent">
Badge
</span>
</Shiny>
</div>
<div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
<Shiny className="bg-green-800 px-3 py-1">
<span className="relative block bg-gradient-to-b from-green-50/90 to-green-50/60 bg-clip-text text-sm text-transparent">
Badge
</span>
</Shiny>
</div>
</div>
)
}
import { useRef } from "react"
import { Shiny } from "../Shiny"
export default function Example() {
const cardRef = useRef(null)
return (
<div className="flex flex-wrap items-center justify-center gap-4">
<div
ref={cardRef}
className="group p-6 transition-transform duration-200 ease-linear [--border-radius:12px] [transform:perspective(1000px)] hover:duration-[75ms] hover:[transform:perspective(1000px)_rotateY(calc((var(--mx,0.5)-0.5)*20deg))_rotateX(calc((var(--my,0.5)-0.5)*20deg))]"
>
<Shiny className="bg-zinc-700" containerRef={cardRef}>
<div className="flex w-64 max-w-full cursor-default flex-col justify-end p-4 text-sm">
<div className="h-48 w-full rounded-md bg-zinc-950/70" />
<span className="relative mt-4 bg-gradient-to-b from-zinc-50/90 to-zinc-50/60 bg-clip-text font-semibold text-transparent">
3D Card
</span>
<p className="mt-1 text-white/50">
This card rotates as you move your mouse
</p>
</div>
</Shiny>
</div>
</div>
)
}
Get lifetime access to all current and future components for a one-time payment, with no additional costs.
Already purchased? Sign in