AI Blocks › Build websites and web apps
3D website builder
Describe the site and its mood. Get 3D page code with shaders, motion, a preloader and phone tuning.
3D website builder is a free AI skill for the job "Build websites and web apps". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33 · Level: expert · Thinking: high
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
A high-end 3D website needs more than a model on a page, and this skill writes the code for custom shader effects, smooth motion, a loading screen and phone tuning. The work goes in four steps. First, a render loop with a resize handler and a pixel ratio capped at two, so high-density screens do not choke. Second, post-processing such as bloom, depth of field or film grain, kept to few passes. Third, motion and light physics, so objects respond to hover, drag and click. Fourth, an asset pipeline with compressed models and a preloader. It includes examples in React Three Fiber and in GLSL for a wavy liquid surface.
You give it
- A description of the site and its mood
- Your brand colours and any 3D models
- The framework you use, such as React (optional)
- Target devices and a speed goal
You get
- Scene and render loop code
- Shader and post-processing effects
- A preloader
- Motion and hover behaviour
- Mobile performance settings
Use it when
- You want an award-style site with 3D and custom visual effects.
- Your 3D page looks good on a laptop but stutters on a phone.
- You need a branded loading screen while heavy files download.
- You want objects to react to the mouse in a natural way.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can run code and open a browser.