An animated SVG component displaying "xin chào" (Vietnamese hello) with Samsung's bold geometric design featuring angular letterforms, diamond shapes, tech accent lines, and sophisticated spring animations Key Features to Highlight: 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 Corporate presentations
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hello Vietnamese Effect to your project and fits it to your theme.
Code
How Hello Vietnamese Effect is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { SamsungHelloVietnameseEffect } from "@/components/ui/hello-vietnamese-effect";
const settings = {
speed: 1,
rotateY: 0,
scale: 1,
opacity: 1,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="flex h-screen w-screen items-center justify-center">
<SamsungHelloVietnameseEffect
speed={s.speed}
rotateY={s.rotateY}
scale={s.scale}
opacity={s.opacity}
/>
</div>
);
}
















