Skip to main content
AI tutorials

Create Framer 3D and WebGL Components with Design on the Flank

Learn how to use Design on the Flank with Codex, Claude, Claude Code, or ChatGPT to generate complete Framer Code Components. This tutorial covers setup, prompts, Framer integration, Properties customization, testing, and practical tips for 3D, WebGL, and GSAP effects.

About 14 min read
Create Framer 3D and WebGL Components with Design on the Flank

What Is Design on the Flank?

Design on the Flank is an AI skill for building Framer Code Components with Three.js, WebGL, and GSAP. Used with Codex, Claude, Claude Code, or ChatGPT, it helps you create 3D scenes, shader effects, scroll-based animations, and custom interactions from a written description or a visual reference.

Each generated component is provided as a complete TSX file that you can copy into Framer. Component settings are exposed through Framer's Properties panel, allowing you to change content, colors, images, and motion parameters without editing the code.

Key Features

  • 3D graphics: Create product scenes, particle systems, materials, lighting, and mouse or touch interactions.
  • WebGL effects: Build image distortions, ripples, transitions, and custom shader effects.
  • GSAP motion: Use timelines, text effects, transition sequences, and animations tied to scroll position.
  • Framer integration: Generate responsive layouts, Property Controls, and components that can be used directly in Framer.
  • Component editing: Extend an existing component or fix problems while preserving settings outside the requested scope.

Choose an AI Platform

The project supports several AI workflows. Choose the one that matches the tool you already use.

Install the Skill with Codex

The quickest setup is to ask Codex to install the skill directly from the repository.

Cài skill Design on the Flank từ https://github.com/Chien1618/design-on-the-flank/tree/main/skills/design-on-the-flank

After installation, start a new conversation and describe the Framer component you want to create. The request above is written in Vietnamese, matching the project README, but the same workflow can be adapted to your preferred language.

Use the Knowledge File with ChatGPT

For ChatGPT, attach the starter knowledge file to a conversation and then describe the component you want. Include the visual behavior, interaction model, and settings you want to expose in Framer.

If ChatGPT requests additional documentation or cannot open a linked resource, download the requested file and attach it to the same conversation. The project provides a detailed ChatGPT guide.

Create a Framer Component Step by Step

  1. Describe the desired result. Explain the visual effect, user interaction, and parameters that should be adjustable in Framer. You can also provide a reference image, video, or existing code.
  2. Request complete code. Ask the AI for a complete TSX file, or for a complete code scaffold when the component requires additional resources.
  3. Move the code into Framer. Create a Framer Code Component, replace the sample content with the generated code, and add the component to your page. Use the Framer integration guide for the detailed process.
  4. Customize and test. Adjust the exposed settings in the Properties panel, then open Preview to test animation, scrolling, mouse input, touch input, and responsive behavior.

Write Effective Prompts

A strong prompt describes both the appearance and the controls you need. Specify the component's role, its animation behavior, its interaction model, and the values that should be editable through Properties.

For example, you can request a 3D hero section like this:

Dùng Design on the Flank tạo hero sản phẩm 3D cho Framer, chuyển góc nhìn theo cuộn và cho phép chỉnh model, ánh sáng, nội dung trong Properties.

In English, the same request would ask for a 3D product hero for Framer, a camera angle that changes with scroll, and editable model, lighting, and content settings in Properties. You can find additional examples in the project's sample prompt guide.

Working with External Assets

Some components require a 3D model, image, or other private data. When that happens, provide the relevant asset to the AI and follow the setup instructions included with the generated code. Do not assume that an asset-dependent component will work until its required resources have been configured.

Once the component is in Framer, use Properties for the settings exposed by the generated code. This can include content, colors, images, and motion parameters, depending on the component.

Advanced Tips

Describe the interaction precisely

For Three.js and WebGL components, clarify whether the experience should react to the mouse, touch, scroll position, or a combination of inputs. Mention how the effect should begin, change, and finish so the generated animation matches the intended behavior.

Separate editable settings from implementation details

Tell the AI which values should be available in Framer's Properties panel. This helps keep content and visual parameters adjustable while leaving the implementation inside the TSX component.

Preserve existing configuration when editing

When asking the AI to modify an existing component, identify the feature or bug that is in scope and ask it to preserve unrelated settings. Design on the Flank specifically supports extending components or fixing issues without changing configuration outside the requested change.

Test in Preview

Use Framer Preview to verify responsive layout, scroll transitions, pointer interactions, touch behavior, and asset loading. If something needs to change, describe the observed issue and the desired result in a follow-up request.

Troubleshooting and Documentation

For common problems, consult the project's troubleshooting guide and frequently asked questions. The documentation also includes the step-by-step guide for moving generated code into Framer.

Design on the Flank incorporates Framer and Three.js knowledge from Framer Labs and official GSAP skills from GreenSock. Review the project's terms of use and third-party attribution information before using it.

Conclusion

Design on the Flank provides a practical AI-assisted workflow for creating Framer Code Components with Three.js, WebGL, and GSAP. Install the skill or attach its knowledge file, describe the experience you want, copy the generated TSX into Framer, and refine the result through the Properties panel and Preview.