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

Advanced AI Prompt for Variable Font Weight Cursor Feedback

Customize the variables below to instantly engineer your prompt.

Required Variables

variable-font-weight-cursor-feedback.txt
Act as a Creative Typographic Engineer. Design a deeply interactive, invisible cursor experience where the sheer proximity of the user's pointer physically alters the typographic weight of the [FONT_FAMILY] Variable Font on the page. Write a high-speed JavaScript `requestAnimationFrame` loop that constantly calculates the Pythagorean distance between the raw mouse `clientX/clientY` and the bounding box of the nearest HTML character node. Mathematically map this distance float to the CSS `font-variation-settings: 'wght'` axis, smoothly interpolating from a fragile [MIN_WEIGHT] up to an aggressive [MAX_WEIGHT] as the cursor gets closer. You must execute this exclusively via updating CSS Variables (`--cursor-weight`) to guarantee 60fps performance and absolutely prevent the browser from executing catastrophic layout recalculations (layout thrashing) during the animation.
Launch In:ChatGPTClaudeGemini

Example Text Output

"A JS-to-CSS-variable bridge that updates the '--weight' property based on mouse distance, creating a dynamic typographic atmosphere."

More Web Components Prompts

View all →
🧊#React

Advanced AI Prompt for Framer Motion Parallax Hero Components

The AI will generate a complete TypeScript React component featuring a parallax container with useScroll integration, mapping scroll offsets to CSS translate values for five different image layers with optimized spring physics.

🧊#React

Technical Prompt for React Horizontal Scroll Sections with Framer Motion

The AI will output a modular React component that uses a sticky wrapper to pin the viewport while translating a horizontal inner container based on the user's vertical scroll progress.

🧊#React

Expert AI Prompt for Scroll-Linked SVG Path Drawing in React

The AI will provide a React component that dynamically renders an SVG where the stroke-dasharray and stroke-dashoffset are controlled by the scroll position, creating a 'drawing' effect as the user moves down the page.

Frequently Asked Questions

What is the "Advanced AI Prompt for Variable Font Weight Cursor Feedback" prompt used for?▾

A JS-to-CSS-variable bridge that updates the '--weight' property based on mouse distance, creating a dynamic typographic atmosphere.

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.