text effect

A collection of animated greeting components featuring Samsung's distinctive angular design language with geometric letterforms, spring animations, and tech-forward styling. Includes both English and Vietnamese variants with futuristic accent elements. Technical Features: Spring Animations: Variable stiffness (120-400) and damping (14-22) for realistic motion 3D Effects: RotateX and rotateY transformations for depth Geometric Design: Square line caps and miter joins for sharp, tech-forward appearance Staggered Timing: Precise animation delays for dramatic sequential reveals Color Accents: Samsung-brand blue and cyan highlights Blur Effects: Smooth focus transitions on accent elements Design Philosophy: Angular Aesthetic: Sharp corners and geometric shapes reflecting Samsung's innovation focus Tech-Forward: Futuristic elements like corner brackets and accent lines Brand Identity: Distinct from organic Apple design with bold, industrial styling Scalable: Responsive SVG design that works at any size Accessible: Semantic titles and proper motion handling Usage Examples: Landing page hero animations Brand identity presentations Loading screens with personality Interactive greeting experiences Multilingual applications Tech product launches

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds text effect to your project and fits it to your theme.

"use client";

import * as React from "react";
import SamsungHelloVietnameseEffect from "@/components/ui/text-effect";

const settings = {
  speed: 1,
  rotateY: -15,
  scale: 0.7,
  opacity: 0,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const [runId, setRunId] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setRunId((n) => n + 1), 9000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex h-screen w-screen items-center justify-center">
      <SamsungHelloVietnameseEffect
        key={runId}
        speed={s.speed}
        rotateY={s.rotateY}
        scale={s.scale}
        opacity={s.opacity}
        className="h-40 text-foreground"
      />
    </div>
  );
}