Chánh Đại

Apple Hello Effect

Text 610

About

Create a "Hello" writing effect inspired by Apple using Motion for React.

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

Code

How Apple Hello Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AppleHelloEnglishEffect } from "@/components/ui/apple-hello-effect";

const AppleHelloEffectDemo = () => {
  return (
    <div className="flex w-full h-screen flex-col justify-center items-center gap-16">
      <AppleHelloEnglishEffect speed={1.1} />
    </div>
  );
};

export { AppleHelloEffectDemo };

Dependencies

More by Chánh Đại

View all
  • Theme Switcher

    Theme Switcher

    225
  • Hero Golden Spiral

    Hero Golden Spiral

    101
  • Mobius Loop Icon

    Mobius Loop Icon

    69
  • Wheel Picker

    Wheel Picker

    67
  • Testimonial 2

    Testimonial 2

    32
  • Glow Card Grid

    Glow Card Grid

    28
  • Spinning Circular Text

    Spinning Circular Text

    23
  • Testimonial

    Testimonial

    12

More in Text

View all
  • Vertical Cut Reveal Characters

    Vertical Cut Reveal Characters

    103
  • Rainbow Text Effect

    Rainbow Text Effect

    47
  • Motion Blur Text

    Motion Blur Text

    36
  • Text Loop

    Text Loop

    310
  • Text Reveal

    Text Reveal

    27
  • Typography

    Typography

    4
  • Animated Text

    Animated Text

    8
  • Lightning Text

    Lightning Text

    123