Google Gemini Effect
Three.js fiber-based animated beam effect inspired by Google Gemini's visual identity.
Preview
Google Gemini Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Hero sections for AI-related product pages.
Why this component matters
The organic, flowing beam communicates intelligence and sophistication — ideal for AI product messaging.
Usage guidance
Requires Three.js. Use as a full-bleed hero background behind minimal content. Performance-intensive — ensure it degrades gracefully on low-end devices.
Installation
bash
npx shadcn@latest add @aceternity/google-gemini-effectUsage
example.tsxtsx
import { GoogleGeminiEffect } from "@/components/ui/google-gemini-effect";
export default function Example() {
return (
<GoogleGeminiEffect>
{/* Your content here */}
</GoogleGeminiEffect>
);
}Source
google-gemini-effect.tsx
components/ui/google-gemini-effect.tsx