k72 yt

Lightweight Vite React project focused on UI animations (GSAP).

Overview

• Purpose: demo and build smooth UI/UX animations across the site using GSAP (GreenSock Animation Platform).
• Stack: Vite + React (JSX), modern CSS, assets and small component structure.

Quickstart

1. Install dependencies:

npm install

2. Start dev server:

npm run dev

3. Build for production:

npm run build

Project structure (key files)

• src/ — application source
  • App.jsx, main.jsx — app entry
  • index.css — global styles
  • components/ — UI components
    • common/Stairs.jsx
    • home/HomeHeroText.jsx, home/RoundedVideo.jsx, home/Video.jsx
    • Navigation/Navbar.jsx, Navigation/FullScreenNav.jsx
    • projects/ProjectCard.jsx
  • context/ — nav contexts
  • pages/ — Home.jsx, Projects.jsx, Agence.jsx

About GSAP (why & how it's used here)

• GSAP (GreenSock Animation Platform) is a high-performance JS animation library ideal for complex, timeline-based UI animations and scroll-triggered effects.
• In this project, GSAP is the primary tool used to animate hero text, video treatments, navigation transitions, and other micro-interactions across components such as HomeHeroText.jsx, RoundedVideo.jsx, Navbar.jsx, and Stairs.jsx.

Why choose GSAP

• Smooth, performant animations (uses transforms where possible)
• Timeline-based control for sequencing
• Plugins like ScrollTrigger for scroll-driven animations
• Wide browser compatibility and robust control APIs

Install GSAP

• npm (recommended):

npm install gsap

• CDN (quick demo):

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

Using GSAP in React (example)

• Typical pattern: use useRef for DOM refs and useEffect to run animations once mounted.

import { useRef, useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

export default function HomeHeroText() {
	const el = useRef(null)

	useEffect(() => {
		const ctx = gsap.context(() => {
			gsap.from('.hero-line', {
				y: 30,
				opacity: 0,
				stagger: 0.08,
				duration: 0.7,
				ease: 'power2.out'
			})
		}, el)

		return () => ctx.revert()
	}, [])

	return (
		<div ref={el} className="hero">
			<h1 className="hero-line">Animate me</h1>
		</div>
	)
}

• Use gsap.context() (shown above) in React to scope selectors and safely revert animations on unmount.

Common GSAP patterns used

• gsap.timeline() for ordered sequences
• ScrollTrigger for scroll-driven animations and pinning
• matchMedia for responsive animation toggles
• Easing functions (power1, expo, elastic) for natural motion

Performance tips

• Animate transforms (translate, scale, rotate) and opacity, avoid animating layout-affecting properties (width/height/top/left) when possible.
• Add will-change: transform only when necessary, and remove when not.
• Batch DOM reads/writes if manipulating many elements.
• Use gsap.context() and ctx.revert() to prevent memory leaks when components unmount.

GSAP licensing note

• Core GSAP (the main engine and common plugins like ScrollTrigger) is available under a permissive license for most uses. Some advanced plugins and bonus tools require Club GreenSock membership — check the GreenSock site for details.

Links & resources

• GSAP docs: https://greensock.com/docs/
• ScrollTrigger: https://greensock.com/scrolltrigger/
• React + GSAP patterns: https://greensock.com/react/

About "Enable Gemini 3 Flash (Preview) for all clients"

• I cannot change external account or console settings from this environment.
• If you need to enable the feature across your org/clients, follow the steps below or provide details (platform & admin access) and I can generate commands or an automation script.

Steps to enable (generic guidance):

1. Identify the admin console or feature-flag system where "Gemini 3 Flash (Preview)" is managed (e.g., cloud provider console, internal feature-flag dashboard, or partner admin UI).
2. Ensure you have the proper admin/owner role for the organization or project.
3. Locate the feature toggle by searching for "Gemini 3 Flash" or browsing a Features/Preview section.
4. Toggle the feature to "Enabled" and select the scope: "All clients" or the appropriate org-wide scope.
5. Save changes and, if applicable, notify clients or roll out gradually (staged rollout) to monitor issues.

Example support request template to send to platform support or internal ops:

Subject: Request to enable "Gemini 3 Flash (Preview)" for all clients

Hi [Support/Ops],

Please enable the feature "Gemini 3 Flash (Preview)" across all clients for our organization (org ID: <your-org-id>). We have admin permissions and will monitor for issues post-rollout. If you need additional authorization or confirmation, let me know the required steps.

Thanks,
[Your Name]

If you tell me which platform (Google Cloud, internal feature-flag system, etc.), I can provide a precise step-by-step or a sample CLI/API request.

---

If you want, I can:

• open a PR with this README.md,
• add a small docs/ page with expanded GSAP examples, or
• produce a script to toggle the feature if you provide API details.