Internal tools · v1.1
GSAP Motion
made systematic.
Three tools for building production-ready GSAP animations in Elementor — from deciding what to animate to generating the code.
Motion Decision Tool
Pick a section type and goal — get the right effect, Elementor compatibility rating, and a corrected production prompt. 46 effects mapped.
Hero Workflow Doc
Complete step-by-step workflow for hero animations. Elementor structure, full three-layer code, live demo, and pre-flight checklist.
Animation Brief Generator
Describe your section or upload a design — AI maps every element to an effect and outputs Elementor-ready GSAP code with your actual class names.
Section Workflow Generator
Pick any section type — hero, cards, stats, FAQ and more. Get the full tabbed workflow: Elementor structure, production code, live demo, and pre-flight checklist.
Custom Easing Builder
Drag control points to design a cubic-bezier curve. Preview live with any duration. Copy as a CustomEase string. Save named eases per project.
First-time setup
If you're seeing this after a fresh deploy, complete these steps to activate the AI brief generator.
1
Add your Anthropic API key
Netlify → Site configuration → Environment variables → Add variable.
Key:
Key:
ANTHROPIC_API_KEY · Value: your key from console.anthropic.com2
Trigger a redeploy
Netlify → Deploys → Trigger deploy → Deploy site. The function needs a fresh build to read the new env variable.
3
Verify the connection
Click Check API in the top-right. You should see a green dot and "API connected". If not, re-check the key value in your env variables.
4
Optional: Figma integration
To auto-detect CSS class names from Figma files, add
FIGMA_ACCESS_TOKEN to Netlify environment variables. Get a Personal Access Token from Figma → Account Settings → Personal access tokens.5
Optional: custom domain
Netlify → Domain management → add
tools.designsuite.ai. Add a CNAME record in your Hostinger DNS pointing to your Netlify subdomain.