Blenra LogoBlenra
Optimized for: Gemini / ChatGPT / Claude
#GSAP

State-Driven GSAP Timelines for Interactive Data Visualizations

Customize the variables below to instantly engineer your prompt.

Required Variables

gsap-state-driven-data-visualization.txt
Act as a Data Visualization Engineer. Create a highly complex, state-driven GSAP timeline architecture that programmatically animates an SVG-based [CHART_TYPE] (e.g., a multi-axis scatter plot) reacting to real-time mutations in a massive [DATA_SET]. Every single data point's spatial translation must execute over a strict [TRANSITION_DURATION] utilizing a highly organic [EASING_TYPE] (e.g., `elastic.out`). You must explicitly implement D3.js-style 'enter', 'update', and 'exit' lifecycle states for the DOM elements, leveraging GSAP's high-performance sequencing engine to handle the staggered interpolation of heights, colors, and coordinates without dropping frames during heavy data filtering events.

Example Text Output

"A dynamic bar chart that morphs its shapes and scales its axes smoothly whenever the user filters the source JSON data."

More Web Components Prompts

View all →

Frequently Asked Questions

What is the "State-Driven GSAP Timelines for Interactive Data Visualizations" prompt used for?

A dynamic bar chart that morphs its shapes and scales its axes smoothly whenever the user filters the source JSON data.

Which AI tools work with this prompt?

This prompt is optimized for Gemini / ChatGPT / Claude, but works great with ChatGPT, Claude, Gemini, and other large language models. Simply copy it and paste it into your preferred AI tool.

How do I customize this prompt?

Use the variable fields above to fill in your specific details. The prompt will auto-update as you type, ready to copy instantly.

Is this prompt free?

Yes! All prompts on Blenra are free to copy and use immediately. No account required.