3D Web Experiences

Creative skill, available on Zeplik

3D Web Experiences is a ready-to-run creative skill on Zeplik. js, React Three Fiber, WebGL, Spline, scroll-driven 3D scenes. Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer.

The 3D Web Experiences skill loads automatically when your request matches it, or you can invoke it directly by typing /3d-web-experience in any chat. It works with attachments, connectors, and any model that supports the task, so you get the same expert method every time without setting anything up.

What the 3D Web Experiences skill can do

Try these prompts on Zeplik

Pick a prompt to open it in the Zeplik app. If you are not signed in yet, your prompt is waiting for you the moment you do.

How the 3D Web Experiences skill works

/3d-web-experience

Bring the third dimension to the web. Know when 3D enhances and when it is just showing off. Balance visual impact with performance, make 3D accessible to users who have never touched a 3D app, and create moments of wonder without sacrificing usability.

Capabilities

  • Three.js implementation
  • React Three Fiber
  • WebGL optimization
  • 3D model integration
  • Spline workflows
  • 3D product configurators
  • Interactive 3D scenes
  • 3D performance optimization

Patterns

3D Stack Selection

When starting a 3D web project, choose the right approach.

ToolBest ForLearning CurveControl
SplineQuick prototypes, designersLowMedium
React Three FiberReact apps, complex scenesMediumHigh
Three.js vanillaMax control, non-ReactHighMaximum
Babylon.jsGames, heavy 3DHighMaximum

Decision tree:

Need quick 3D element?
  Yes -> Spline
  No  -> Continue

Using React?
  Yes -> React Three Fiber
  No  -> Continue

Need max performance/control?
  Yes -> Three.js vanilla
  No  -> Spline or R3F

Spline (fastest start):

import Spline from '@splinetool/react-spline';

export default function Scene() {
  return (
    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
  );
}

React Three Fiber:

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <Model />
      <OrbitControls />
    </Canvas>
  );
}

3D Model Pipeline

When preparing 3D assets for the web.

Format selection:

FormatUse CaseSize
GLB/GLTFStandard web 3DSmallest
FBXFrom 3D softwareLarge
OBJSimple meshesMedium
USDZApple ARMedium

Optimization pipeline:

1. Model in Blender/etc
2. Reduce poly count (< 100K for web)
3. Bake textures (combine materials)
4. Export as GLB
5. Compress with gltf-transform
6. Test file size (< 5MB ideal)

GLTF compression:

# Install gltf-transform
npm install -g @gltf-transform/cli

# Compress model
gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

Loading in R3F with progress:

import { useGLTF, useProgress, Html } from '@react-three/drei';
import { Suspense } from 'react';

function Loader() {
  const { progress } = useProgress();
  return <Html center>{progress.toFixed(0)}%</Html>;
}

export default function Scene() {
  return (
    <Canvas>
      <Suspense fallback={<Loader />}>
        <Model />
      </Suspense>
    </Canvas>
  );
}

Scroll-Driven 3D

When integrating 3D with scroll.

R3F scroll controls:

import { ScrollControls, useScroll } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function RotatingModel() {
  const scroll = useScroll();
  const ref = useRef();

  useFrame(() => {
    // Rotate based on scroll position
    ref.current.rotation.y = scroll.offset * Math.PI * 2;
  });

  return <mesh ref={ref}>...</mesh>;
}

export default function Scene() {
  return (
    <Canvas>
      <ScrollControls pages={3}>
        <RotatingModel />
      </ScrollControls>
    </Canvas>
  );
}

GSAP + Three.js:

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to(camera.position, {
  scrollTrigger: {
    trigger: '.section',
    scrub: true,
  },
  z: 5,
  y: 2,
});

Common scroll effects: camera movement through the scene, model rotation on scroll, reveal/hide elements, color/material changes, exploded view animations.

Anti-Patterns

3D For 3D's Sake

Why bad: Slows down the site, confuses users, drains battery on mobile, does not help conversion.

Instead: 3D should serve a purpose. Product visualization is good; random floating shapes probably are not. Ask: would an image work?

Desktop-Only 3D

Why bad: Most traffic is mobile. Heavy 3D kills battery and crashes low-end devices.

Instead: Test on real mobile devices, reduce quality on mobile, provide a static fallback, consider disabling 3D on low-end hardware.

No Loading State

Why bad: Users think the page is broken; 3D takes time to load; high bounce rate.

Instead: Show a loading progress indicator or skeleton/placeholder, load 3D after the page is interactive, and optimize model size.

Usage

/3d-web-experience $ARGUMENTS

How to use the 3D Web Experiences skill

  1. Sign in to Zeplik

    Create a free Zeplik account or sign in. New accounts start with free credits, so you can try the 3D Web Experiences skill right away.

  2. Describe your creative task

    Ask in plain language, or type /3d-web-experience to invoke the skill directly. Zeplik recognizes the 3D Web Experiences skill and applies its method.

  3. Review and refine the result

    Zeplik returns a clear, structured answer. Ask follow-ups in the same chat to refine it or take the next step.

Source and credit

Author
davila7
License
MIT

Adapted from the open-source davila7/claude-code-templates project and tuned to run natively on Zeplik. View source on GitHub.

Frequently asked questions

What is the 3D Web Experiences skill?
3D Web Experiences is a ready-to-run creative skill on Zeplik. js, React Three Fiber, WebGL, Spline, scroll-driven 3D scenes. Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer.
How do I use 3D Web Experiences on Zeplik?
Sign in to Zeplik and ask in plain language, or type /3d-web-experience in any chat to invoke it directly. The skill applies its method and returns a result you can refine in the same conversation.
Which AI model does the 3D Web Experiences skill use?
Any model you choose. Zeplik works across every model in one chat, so the 3D Web Experiences skill runs on your preferred model for the task.
Where does the 3D Web Experiences skill come from?
The 3D Web Experiences skill is adapted from the open-source davila7/claude-code-templates project (MIT) and tuned to run natively on Zeplik. The original source is linked on this page.
How much does the 3D Web Experiences skill cost?
Using the skill is free to start. You only spend Zeplik credits when the assistant runs, and new accounts begin with free credits.

Related creative skills

More on Zeplik

Try 3D Web Experiences on Zeplik

Every model, one chat. Bring the 3D Web Experiences skill into your next conversation and let the assistant do the work.

Browse all skills
3D Web Experiences - Creative skill for Zeplik AI | Zeplik Chat