@webloved

How I build with Claude 👇 Academy in bio 🔗 Full prompt goes in the Academy soon. It took hours of testing to get right. Want a site like this? Send me an email, email in bio 📩 Nobody waits for a spinner. So the loading screen is the first scene: 1. Load everything through THREE.LoadingManager. onProgress gives you loaded and total, so progress = loaded / total. 2. Show the number big. Lerp it 0.1 per frame so it counts smoothly instead of jumping from 12 to 80. 3. Draw the whole shape first as a wireframe: EdgesGeometry plus LineSegments at 30% opacity. People see the plan before the stone. 4. Put every block in one InstancedMesh, sorted bottom row first. Hundreds of blocks, one draw call. 5. Set mesh.count = Math.floor(progress * total). It only draws the first N, so the object builds itself bottom up while the files load. 6. Let the ground follow. The grid fades into sand once progress passes 0.6. 7. Give it a floor of 2.5s so a cached visit still plays the build. 8. At 100, don't jump ahead. Show "scroll to enter" and let the visitor start. Save this before your next 3D site 🔥 #claude #threejs #webdesign #3dwebsite #creativecoding

How I build with Claude 👇 Academy in bio 🔗 Full prompt goes in the Academy soon. It took hours of testing to get right. Want a site like this? Send me an email, email in bio 📩 The exploded view looks like hours of animation. It's one number and one formula: 1. Get the model in parts. Use part segmentation in Tripo, or generate each piece on its own with a unique name. One mesh per part. 2. On load, save each part's start position and its direction from the model's centre. Get both centres with new THREE.Box3().setFromObject(obj).getCenter(new THREE.Vector3()), subtract, normalize. 3. One value drives everything: explode, from 0 to 1, tied to scroll. 4. position = start + direction * explode * 1.5. Give each part a random factor between 0.7 and 1.3, picked once, so it doesn't look like a perfect burst. 5. Small parts fly further. Multiply by clamp(1 / size, 0.5, 2), where size is the part's size divided by the whole model's size. 6. Add a little spin. A random angle up to 0.6 radians, times explode. 7. Run the scroll value through power2.inOut so it holds still at 0 and at 1. 8. Putting it back together is free. Same formula, explode goes from 1 to 0. 9. Count the meshes with scene.traverse and show the number on the page. A real parts count beats a made up one. Save this before your next 3D product page 🔥 #claude #threejs #webdesign #3dwebsite #creativecoding

How I build with Claude 👇 Academy in bio 🔗 Want a site like this? Send me an email, email in bio 📩 That organic edge isn't a drawn mask. It's a noise texture with a moving threshold. Ask Claude Opus 5.5 for a threshold dissolve: 1. Two images with the exact same camera: a white clay model and the final render. Make the clay one from the render with an AI image edit. Same angle, only the material changes. 2. One WebGL plane with both as textures, plus a grayscale noise texture. 3. In the fragment shader: m = smoothstep(uProgress - 0.04, uProgress + 0.04, noise). Then mix(render, clay, m). 4. Grow it from the centre: noise = noise * 0.6 + distance(vUv, vec2(0.5)) * 0.4. The reveal spreads out like a stain. 5. Light the edge. A thin white rim where the noise is within 0.02 of uProgress sells the torn paper look. 6. Animate uProgress from 0 to 1. 2.5s with power2.inOut on load, or scrub it with scroll. 7. Blur the clay image a little. The sharp render pops forward on its own. 8. Copy object-fit: cover in the shader. Scale the UVs with the two aspect ratios or the photos stretch on mobile. Save this for your next hero 🔥 #claude #webgl #threejs #webdesign #creativecoding

Comment "WEBLOVE" and I'll send you the workflow 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 Want this with Claude Opus 5.5? Ask for depth of field in the particles. That's what makes them look filmed: 1. One THREE.Points with 20,000 particles spread around the camera. 2. A ShaderMaterial. In the vertex shader get the depth: -(modelViewMatrix * vec4(position, 1.0)).z 3. blur = abs(depth - uFocus). How far each particle sits from the focus plane. 4. Out of focus gets bigger: gl_PointSize = (2.0 + blur * 8.0) * (300.0 / depth). 5. Bigger also gets fainter: alpha = 1.0 / (1.0 + blur * blur). Skip this and it looks like snow. 6. Draw each point as a soft disc with gl_PointCoord and smoothstep. 7. AdditiveBlending and depthWrite: false, so overlapping light adds up. 8. Two warm colours only, gold rgb(255, 181, 71) and amber rgb(200, 116, 42), picked per particle at random. 9. Move uFocus with scroll. The focus racks from the dust to the object, like a real camera. More workflows like this inside the Academy. Save this for your next 3D hero 🔥 #claude #threejs #webdesign #creativecoding #webgl

Comment "WEBLOVE" and I'll send you the prompt 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 One shot with Lovable. AI animates the entrance, then the page goes dead. Ask for the idle: 1. Every moving thing gets 3 lines in the prompt: enter, idle, react. 2. Enter, once. Scale 0.9 to 1 and opacity 0 to 1 in 1.2s with cubic-bezier(0.16, 1, 0.3, 1). 3. Idle, forever. translateY 14px up and down in 7s. Rotate from -3deg to 3deg in 11s. 4. Two different durations on purpose. They take over a minute to line up again, so it never reads as a loop. 5. ease-in-out and alternate on every loop. Linear looks like a screensaver. 6. React. The object leans toward the cursor, 6deg at most, smoothed with a lerp of 0.08 per frame. 7. The glow behind it breathes. Opacity 0.5 to 0.8 in 5s. 8. Keep the giant wordmark still. One moving thing needs one fixed thing next to it. 9. prefers-reduced-motion keeps the enter and stops the idle. This prompt took hours of testing to get right. More prompts like this inside the Academy. Save this before your next hero 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #uidesign

How I build with Claude 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 You don't need 3D for products that swing in on a curve. It's one wheel that rotates. 1. Make one circle div bigger than the screen. width: 200vw, height: 200vw, with its centre far below the hero. 2. Place each product on the edge. transform: rotate(calc(var(--i) * 20deg)) translateY(-100vw). --i is the product number. 3. Don't straighten them. The side products tilt on their own because they sit on the wheel. 4. To change product, rotate the whole wheel by -20deg. 0.9s with cubic-bezier(0.65, 0, 0.35, 1). 5. Change the background colour with it. Register --bg with @property and syntax "<color>", then transition: --bg 0.9s. Without @property a CSS variable can't animate. 6. Curved text is SVG. Put the words on a circle with <textPath> and rotate it at half the wheel speed. 7. Use transparent PNG cutouts with filter: drop-shadow(0 30px 30px rgba(0,0,0,.25)). box-shadow would draw a square. 8. Add an idle float. translateY 10px and rotate 2deg, 5s, ease-in-out, alternate, a different delay on each product. Save this for your next product page 🔥 #claude #webdesign #css #frontend #uidesign

How I build with Lovable 👇 Academy in bio 🔗 Full prompt goes in the Academy soon. It took hours of testing to get right. Want a site like this? Book a call, link in bio 📞 The trick: Lovable gets one generated image. Everything else has to be drawn in code. 1. One image only. The product, on a transparent background. It shows in the hero and the configurator, nowhere else. 2. Icons, rings, labels and the technical drawing are SVG. Light, sharp at any size, and they can move. 3. The drawing draws itself. Every path gets pathLength="1", stroke-dasharray: 1 and stroke-dashoffset going from 1 to 0 in 1.2s. 4. Start it with an IntersectionObserver at threshold 0.3. Labels fade in 200ms after their line ends. 5. New colours without new images. Put a colour layer over the product with mix-blend-mode: color and mask it with the same PNG using mask-image. 6. One background hue for the whole page. White for type and lines. Nothing else. 7. Write it in the prompt: "do not generate any other image". Leave that door open and you get random stock style pictures. Save this before your next one shot 🔥 #lovableugcpartner #lovable #webdesign #vibecoding #uidesign

Comment WEBLOVE and let's create your website 🤝 How I build with Claude 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 You can get this miniature 3D look without a 3D artist. It starts with one camera choice. 1. Use an OrthographicCamera, not a PerspectiveCamera. No vanishing point, so the scene reads like a toy model. 2. Set the isometric angle. camera.position.set(20, 20, 20), then camera.lookAt(0, 0, 0). 3. Build every object from boxes, cones and cylinders. A tree is an IcosahedronGeometry(1, 0) on a thin cylinder. 4. flatShading: true on every material. That gives the low poly facets. 5. Three colours only. Light grey ground, one brand colour, one accent. 6. One DirectionalLight with castShadow, shadow.mapSize 2048 and PCFSoftShadowMap. 7. Widen light.shadow.camera to cover the scene (left -30, right 30, top 30, bottom -30). The default is tiny and cuts shadows off. 8. Each menu tab stores a camera x, z and zoom. Tween there in 1.2s and call camera.updateProjectionMatrix() on every frame, or the zoom won't change. 9. Loop 2 or 3 small things. A truck follows a CatmullRomCurve3 with getPointAt(t). 10. Text and buttons stay normal HTML on top of the canvas. To pin a button to an object, use position.project(camera). Save this for your next 3D hero 🔥 #claude #threejs #webdesign #3dwebsite #webdevelopment

what do you think ? ⬇️ #motion #motiongraphics #webdesign #claude

Comment "WEBLOVE" and I'll send you the prompt 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 One shot with Lovable. AI sites look generic because every image brings its own colours. This one looks art directed because no image is allowed to keep them. 1. Three colours exist on the whole page: black #0a0a0a, off white #e9ece6 and one acid green #b4ff39. That rule includes the inside of every image. 2. Cutouts are black and white: filter: grayscale(1) contrast(1.25), transparent background, sitting on flat green squares. No gradients. 3. Every editorial image is dithered down to two colours. Draw it on a canvas at one third size, compare each pixel's brightness to a 4x4 Bayer matrix, paint it black or green, then scale it up with image-rendering: pixelated. 4. Headlines in one heavy grotesk, uppercase, clamp(56px, 11vw, 180px), line-height 0.85. 5. Labels in a mono font at 11px, uppercase, letter-spacing 0.12em. Two fonts, never a third. 6. No rounded corners anywhere. Frames are 1px lines at rgba(255,255,255,0.14). 7. One active item per list: the selected row fills with green and its text turns black. Ten different images, one treatment, and it reads as one magazine instead of a stock photo collage. This prompt took hours of testing to get right. More prompts like this inside the Academy. Save this 🔥 #lovablepartner #webdesign

How I build with Claude 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 The 3D object never leaves the screen. It is one model on one fixed canvas, and every section just tells it where to stand. 1. One canvas: position fixed, full screen, transparent, pointer-events none. Load the model once. The page scrolls on top of it. 2. In each section, add an empty div where the object should sit. That is its parking spot. Size and place it with normal CSS, so mobile works for free. 3. Every frame, turn the center of that div into 3D coordinates: x = (cx / innerWidth - 0.5) * viewWidth, y = -(cy / innerHeight - 0.5) * viewHeight, with viewHeight = 2 * distance * tan(fov / 2). 4. Blend between the spot you are leaving and the spot you are entering using scroll progress through smoothstep. The object glides between sections instead of teleporting. 5. Smooth everything: position lerps at 0.08 per frame, and rotation.y adds one full turn per section so it spins while it travels. 6. To open the object, split the model in two halves and rotate the top one up to 1.9 radians around its hinge with the same progress value. 7. The hand drawn arrows are SVG paths: pathLength 1, stroke-dasharray 1, stroke-dashoffset from 1 to 0 in 0.8s. They draw themselves when the section arrives. Save this if you build product sites 🔥 #claude #threejs #webgl #webdesign #frontend

Comment "WEBLOVE" and I'll send you the prompt 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 One shot with Lovable. Dark sites don't look premium because they're dark. They look premium because the page has one light. So the prompt names the light source first, and every glow on the page has to obey it. 1. The background is never pure black. Use #0b0607, then one radial gradient coming from the light: radial-gradient(60% 50% at 50% 85%, rgba(255,50,40,0.18), transparent 70%). 2. The light is one circle: radial-gradient(circle at 35% 30%, #ff6b5a, #b3160f 40%, #2a0605 75%) with box-shadow 0 0 120px 20px rgba(255,60,40,0.25). 3. One accent, two jobs: the main button and one word in the headline. Nothing else gets the colour. 4. Everything else is white at three strengths: 100% for the headline, 70% for body text, 40% for labels. 5. Borders are light, not lines: 1px rgba(255,255,255,0.08), plus inset 0 1px 0 rgba(255,255,255,0.06) on cards so the top edge catches the light. 6. The main button glows in the colour of the light: box-shadow 0 8px 30px rgba(255,60,40,0.45). The second button stays transparent with the same faint border. 7. Headline in condensed caps, clamp(48px, 7vw, 96px), line-height 0.95. Without the light rule the AI makes everything glow, and a page where everything glows looks like a template. This prompt took hours of testing to get right. More prompts like this inside the Academy. Save this 🔥 #lovablepartner

Comment "WEBLOVE" and I'll send you the workflow to do this 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 How I build with GPT-6 Astra. The AI cannot see your 3D model, and that is why most AI 3D sites are one object spinning in the middle of the page. 1. Before any design, make it read the file: "Load the GLB, go through every part and print its name, its center and its size." Paste that list back into the chat. If the names are junk like Object_12, the center and size still tell it which part is which. 2. Now you direct real parts by name. "Rotate the screen 170 degrees on its hinge." "Slide the card out by its own length." Without that list it can only move the whole object. 3. The exploded view is one loop, not one animation per part. Each part travels along (its center minus the model center), up to 1.5 times the model's size. 4. Delay each part by its distance from the center. The shell leaves first, the core last. 5. One shot per chapter: view position, target, field of view. Each chapter gets 100vh of scroll, the canvas stays fixed, and scroll blends one shot into the next with a 0.08 lerp. 6. The giant words are plain HTML behind a transparent canvas, so the model passes in front of the type. 7. End on a field of view of 20, facing the object straight on. It flattens into a shape you can use as a letter. This workflow took hours of testing to get right. More workflows like this inside the Academy. Save this 🔥 #astra6 #threejs #webdesign #3dwebsite #frontend

How I build with Claude + Higgsfield 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 The hero is an AI video, and it loops clean because of one setting. 1. Generate one still first and lock the frame. Subject, sky, crop. Motion comes later, composition never changes again. 2. Animate it with image to video using the same image as first and last frame. That is what makes a loop with no visible seam. 3. Write "camera locked, only the clouds and fabric move". Leave that out and the model adds a slow zoom, and the loop jumps every 5 seconds. 4. Export H.264 MP4 at 1920 wide, CRF 23, no audio track, under 3MB. Use the first frame as the poster so there is never a black flash while it loads. 5. The video tag needs four attributes: autoplay, muted, loop, playsinline. Miss playsinline and iPhones open it fullscreen. 6. Day and night are two videos stacked on top of each other. The toggle crossfades opacity over 1.2s and copies currentTime from one to the other, so the clouds don't jump. 7. Text over video needs a scrim: linear-gradient(90deg, rgba(0,0,0,0.45), transparent 60%) behind the headline. The type stays readable on every frame. Save this if you build cinematic sites 🔥 #claude #higgsfield #webdesign #frontend #aivideo

Comment "WEBLOVE" and I'll send you the prompt 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 That glowing light is one div, and the apple never touches the 3D scene. There is no 3D scene. 1. The tube is a 6px wide div with three stacked box-shadows: 0 0 12px, 0 0 40px, 0 0 120px, all the same red. One shadow looks like a border, three look like light. 2. Give it a flicker: opacity between 0.92 and 1 on a 3s noise loop. That is what makes the eye read it as a light source instead of a bar. 3. The apple is a transparent PNG with the glint baked into the file. It floats on a sine wave, 6px over 4s, with a 1.5 degree tilt. 4. Cursor parallax: the apple follows the mouse at lerp 0.06, the tube moves the opposite way at half speed. Two layers moving against each other is the whole depth illusion. 5. The headline is a serif with the last line in italic, line-height 1.05, letter-spacing -0.01em. Serif plus italic is what makes it read as a brand instead of a template. 6. The apple sits over the type, with a clipped copy of the headline in front, so it looks woven between the letters. 7. Background is a radial gradient from deep red to near black, never flat black, with 100 drifting 1px dots at opacity 0.3. Save this if you build premium brand sites 🔥 #claude #webdesign #frontend #css #branding

Comment "WEBLOVE" and I'll send you the prompt 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 One shot with Lovable. It comes back finished because the prompt starts with a system, not with sections. 1. Three colours, each with a job. Ink #111112 for dark sections, paper #f3f3f1 for light ones, one accent #ff4f17 for buttons and a single highlight per section. Then the line that matters: no other colours, no gradients. 2. Two fonts, each with a job. A heavy condensed face for headlines, uppercase, line-height 0.9. A plain grotesk at 16px for everything else. 3. One radius, 16px, on every card, button and image. One spacing scale in steps of 8. 4. Sections alternate dark and light. The page gets rhythm without a new idea in every block. 5. Stats count up once, when 40% of the card is on screen: IntersectionObserver with threshold 0.4, 1.6s, ease out. Never on every scroll. 6. The card stack is three cards rotated -8, 4 and 14 degrees, each offset 24px. On hover they fan out 6 degrees more. 7. The feature list opens one row at a time, and the open row inverts to ink. One rule, and the whole list feels designed. A model with a system fills it in. A model without one invents a new style per section. This prompt took hours of testing to get right. More prompts like this inside the Academy. Save this 🔥 #lovablepartner #webdesign

How I build with Claude 👇 Academy in bio 🔗 Want a site like this? Book a call, link in bio 📞 A 3D product in front of a giant outlined word. Two layers, and neither knows about the other. 1. The word is plain HTML, not part of the 3D scene: color: transparent, -webkit-text-stroke: 1px rgba(0,0,0,0.15), font-size: clamp(8rem, 28vw, 30rem). Outline only, so it reads as background instead of fighting the product. 2. The canvas sits on top: position fixed, inset 0, renderer with alpha true, pointer-events none. The model overlaps the letters and you get depth without building any. 3. No HDR file needed. scene.environment = pmrem.fromScene(new RoomEnvironment()).texture gives soft studio reflections in one line. No ambient light, it flattens the plastic. 4. Scroll drives the model: target = progress * Math.PI * 2, then rotation.y += (target - rotation.y) * 0.08. Set it directly and it jitters with every wheel tick. 5. Idle float: position.y = sin(t * 1.2) * 0.04 and rotation.z = sin(t * 0.9) * 0.02. Tiny numbers. Bigger and it looks like a toy. 6. Fast propellers strobe at 60fps. Past a certain speed, hide the blades and show a transparent disc at opacity 0.25. That is how every drone site fakes the blur. 7. Background #e9ecec with a soft vignette, never pure white, or the white shell of the product disappears into the page. Save this if you build product pages 🔥 #claude #threejs #webgl #webdesign

How I build with Claude 👇 Academy in bio 🔗 That particle wave is a grid, and the grid is the whole trick. 1. 300 by 300 points on a plane, one THREE.Points, 90k dots in one draw call. Never scatter them randomly. Random reads as dust, a grid reads as a surface. 2. Displace in the vertex shader, not on the CPU. y = noise(x * 0.15 + t * 0.1, z * 0.15) * 1.8 plus noise(x * 0.6, z * 0.6 + t * 0.2) * 0.3. The first octave is the swell, the second is the ripple on top of it. 3. gl_PointSize = 2.0 * (300.0 / -mvPosition.z). Near dots big, far dots small. That line alone is what sells the depth. 4. Colour by height: mix(#0b3a4a, #3ee6d6, smoothstep(-0.5, 1.5, y)). Valleys sink into the background, peaks go bright. 5. Fade by distance: alpha = 1 - smoothstep(20, 45, dist). The edge of the grid disappears instead of ending on a line. 6. AdditiveBlending with depthWrite false, so overlapping dots glow instead of cutting holes in each other. 7. Camera low at y 2.5 looking slightly down, so the wave fills the bottom two thirds and the headline sits in calm space above it. Save this if you build 3D on the web 🔥 #claude #threejs #webgl

Danger zone. It's a danger zone because what is it doing? It's stopping you from your true potential. It's comfortable. I don't want to step out here because I don't know that area. Don't let anyone say you can't do something. Don't let your mind say, I can't do it anymore. Your body, you can. You just gotta push past it. At the end of my life, my tools

How I build with Claude 👇 Academy in bio 🔗 3D on a white page, and why most attempts look like clay. 1. Kill the ambient light completely. Ambient is what flattens everything. Use an HDR environment at intensity 1, one key directional light at 2 from top left, and a rim light at 1.5 from behind. Form comes from the difference between those three. 2. The fur is MeshPhysicalMaterial with roughness 0.9, metalness 0, sheen 1, sheenRoughness 0.5. Sheen is the property nobody uses and it's the only one that makes fabric read as fabric. 3. Eyes: emissive #f5c400, emissiveIntensity 2, bloom threshold 0.85 so only the eyes glow and not the whole model. 4. Contact shadow under the model, opacity 0.35, blur 2.5. On a white page this is what stops it floating. 5. Draco compress the GLB. 40MB scan becomes 3MB, and the page loads before the person scrolls away. 6. Idle: scale y 1 to 1.015 on a 3s sine for breathing, head lerps toward the cursor at 0.05 capped at 0.3 rad. 7. Browsers block audio until a click. That "click anywhere to enable sound" line is a browser rule dressed as a feature. On first pointerdown, resume the AudioContext and fade gain 0 to 1 over 800ms. Save this if you build 3D on the web 🔥 #claude #threejs #webgl #webdesign

How I build with Claude 👇 Academy in bio 🔗 That headline glows because of three shadows, not a filter. 1. Stack three text-shadows instead of one: 0 0 20px rgba(255,255,255,0.35), 0 0 60px rgba(180,200,255,0.25), 0 0 120px rgba(180,200,255,0.12). One shadow looks like a smudge, three reads like light. 2. Never use filter: blur or drop-shadow for this. It rasterises the whole layer and the type goes soft on retina. 3. Text over moving video always loses contrast somewhere in the clip. So put a scrim behind it: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%). Invisible, and the type never disappears on a bright frame. 4. Filter the video itself: brightness(0.7) contrast(1.1) saturate(0.9). The footage stops competing with the words. 5. Serif display type wants letter-spacing 0.02em and line-height 1.05. Sans wants the opposite. 6. Entrance: wrap each word in a span, opacity 0 and translateY(12px), stagger 80ms, 1.2s cubic-bezier(0.16, 1, 0.3, 1). That easing is the whole luxury feel. 7. On mobile drop to one shadow. Large blur radii are expensive on phone GPUs. Save this if you build dark sites 🔥 #claude #webdesign #css #frontend #typography