Components
Lamp
Lamp
Elegant lamp effect with glowing typography and smooth animations.
UI Studio
Design System
Installation
1
Install the packages
npm i motion react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
lamp.tsx
"use client";
import React from "react";
import { motion } from "motion/react";
import { LampContainer } from "../ui/lamp";
export function Lamp() {
return (
<LampContainer>
<motion.h1
initial={{ opacity: 0.5, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="mt-8 bg-gradient-to-br from-emerald-300 to-green-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
>
UI Studio <br /> Design System
</motion.h1>
</LampContainer>
);
}
export default Lamp;"use client";
import React from "react";
import { motion } from "motion/react";
import { LampContainer } from "../ui/lamp";
export function Lamp() {
return (
<LampContainer>
<motion.h1
initial={{ opacity: 0.5, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="mt-8 bg-gradient-to-br from-emerald-300 to-green-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
>
UI Studio <br /> Design System
</motion.h1>
</LampContainer>
);
}
export default Lamp;4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes for the lamp container. |