Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

How i build with Claude👇 Three.js = 360 rotatable product zero plugin needed WebGL PointLight = UVC glow reacts to scroll position CSS scroll-snap = buttery infinite horizontal product scroll GSAP ScrollTrigger = product pins while copy scrolls alongside Lottie via lottie-web = After Effects animations play in browser...

Oluwaphilemon1's profile picture

FHILY👑

7,765 subscribers

166,927 Aufrufe • vor 1 Monat •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

How I build with Claude Fable 5 1. Three.js = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save this
0:13

How I build with Claude Fable 5 1. Three.js = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save this

FHILY👑

149,179 Aufrufe • vor 1 Monat

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️
0:14

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️

FHILY👑

117,941 Aufrufe • vor 1 Monat

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have
0:14

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have

FHILY👑

324,492 Aufrufe • vor 2 Monaten

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have
0:14

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have

FHILY👑

343,671 Aufrufe • vor 1 Monat

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒
0:14

How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒

FHILY👑

76,046 Aufrufe • vor 2 Monaten

How i build with Claude👇 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this
0:16

How i build with Claude👇 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this

FHILY👑

31,879 Aufrufe • vor 1 Monat

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀
0:16

How I use Claude for 2D website animations 👇 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀

FHILY👑

96,471 Aufrufe • vor 2 Monaten

How i build with Claude + Higsfield 🐉 Step 1: generate all scenes in Higsfield as MP4 Step 2: paste URLs into Claude, say embed as scroll-triggered WebGL textures Step 3: Claude writes Three.js, Higsfield supplies the visuals Step 4: tell Claude trigger each video at 25% 50% 75% scroll Step 5: ask Claude to wrap hero video in autoplay muted loop Step 6: Higsfield does the art, Claude does the code Save this
0:15

How i build with Claude + Higsfield 🐉 Step 1: generate all scenes in Higsfield as MP4 Step 2: paste URLs into Claude, say embed as scroll-triggered WebGL textures Step 3: Claude writes Three.js, Higsfield supplies the visuals Step 4: tell Claude trigger each video at 25% 50% 75% scroll Step 5: ask Claude to wrap hero video in autoplay muted loop Step 6: Higsfield does the art, Claude does the code Save this

FHILY👑

81,853 Aufrufe • vor 1 Monat

FABLE 5 + HIGGSFIELD CAN BUILD A $35,000 ANIMATED WEBSITE. IN ONE AGENTIC SESSION. FOR ~$12 IN CREDITS. stop paying a web studio $6,000-$35,000. stop wiring GSAP, Lenis, and frame extraction by hand. Claude Code writes it. Higgsfield renders it. WHAT THE BUILD PRODUCES: → a fully animated, scroll-driven site → cinematic motion clips from 30+ generative models → GSAP ScrollTrigger timelines - zero hand-coded keyframes → Lenis smooth-scroll, tuned pacing → automated frame extraction + asset optimization → six cinematic effects baked in: film grain, particles, vignette, glass cards, color tints, scroll pacing → responsive layout + copy THE STACK: → Claude Code - concept, scaffolding, scroll code, QA → Higgsfield (MCP) - hero clips, transitions, ambient loops, thumbnails → GSAP + Lenis - the motion layer, written for you CONNECT HIGGSFIELD (MCP): add it as a custom connector in Claude Code: mcp_servers: higgsfield: url: " one OAuth flow. done. now Claude can generate and pull clips directly - no manual exporting. WHAT TO PROMPT: concept + scroll: "read this brief, script the scroll - what the visitor feels at second 3, 15, 40. scaffold the site with GSAP ScrollTrigger + Lenis." motion assets: "generate the hero sting and one b-roll clip per section from the story. 3–5s, high-res." polish pass: "bake in film grain, particles, vignette, glass cards, color tints, scroll pacing. no config." QA: "check load speed, mobile breakpoints, and whether the scroll actually lands. rewrite whatever doesn't." WHAT THIS REPLACES: → web studio build: $6,000-$35,000+ → motion artist: $800-2,000/project → front-end dev: $2,000-10,000/project → weeks of handoffs: gone Fable 5 + Higgsfield: a subscription + a few dollars of credits. one session. SETUP IN 10 MINUTES: - install Claude Code - add the Higgsfield MCP + authenticate - drop your brief + references - let it scaffold, generate, and animate in one pass - preview, send fixes in plain English, ship the pipeline was the moat. it just became a prompt. Follow me, comment "WEB" and I'll send you the full step-by-step Playbook. full breakdown in the article 👇
0:14

FABLE 5 + HIGGSFIELD CAN BUILD A $35,000 ANIMATED WEBSITE. IN ONE AGENTIC SESSION. FOR ~$12 IN CREDITS. stop paying a web studio $6,000-$35,000. stop wiring GSAP, Lenis, and frame extraction by hand. Claude Code writes it. Higgsfield renders it. WHAT THE BUILD PRODUCES: → a fully animated, scroll-driven site → cinematic motion clips from 30+ generative models → GSAP ScrollTrigger timelines - zero hand-coded keyframes → Lenis smooth-scroll, tuned pacing → automated frame extraction + asset optimization → six cinematic effects baked in: film grain, particles, vignette, glass cards, color tints, scroll pacing → responsive layout + copy THE STACK: → Claude Code - concept, scaffolding, scroll code, QA → Higgsfield (MCP) - hero clips, transitions, ambient loops, thumbnails → GSAP + Lenis - the motion layer, written for you CONNECT HIGGSFIELD (MCP): add it as a custom connector in Claude Code: mcp_servers: higgsfield: url: " one OAuth flow. done. now Claude can generate and pull clips directly - no manual exporting. WHAT TO PROMPT: concept + scroll: "read this brief, script the scroll - what the visitor feels at second 3, 15, 40. scaffold the site with GSAP ScrollTrigger + Lenis." motion assets: "generate the hero sting and one b-roll clip per section from the story. 3–5s, high-res." polish pass: "bake in film grain, particles, vignette, glass cards, color tints, scroll pacing. no config." QA: "check load speed, mobile breakpoints, and whether the scroll actually lands. rewrite whatever doesn't." WHAT THIS REPLACES: → web studio build: $6,000-$35,000+ → motion artist: $800-2,000/project → front-end dev: $2,000-10,000/project → weeks of handoffs: gone Fable 5 + Higgsfield: a subscription + a few dollars of credits. one session. SETUP IN 10 MINUTES: - install Claude Code - add the Higgsfield MCP + authenticate - drop your brief + references - let it scaffold, generate, and animate in one pass - preview, send fixes in plain English, ship the pipeline was the moat. it just became a prompt. Follow me, comment "WEB" and I'll send you the full step-by-step Playbook. full breakdown in the article 👇

ZEUS⚡️

558,650 Aufrufe • vor 18 Tagen

STUDIOS QUOTE $35,000 FOR THIS WEBSITE. A FULLY ANIMATED, SCROLL-DRIVEN BUILD - CINEMATIC CLIPS, FILM GRAIN, GLASS CARDS - SHIPPED IN ONE SESSION FOR $12. Scroll it and one question won't leave: did an AI really assemble all of this in a single pass? For studios quoting $35,000 and billing $100-149/hr, that question lands like a verdict. Here's what the page actually runs: → Motion clips generated from 30+ models - not stock, not hand-shot → Scroll animations written automatically - zero hand-coded keyframes → Six cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing What that used to require: → A designer, a motion artist, and a developer → Weeks of handoffs → Six systems wired by hand - GSAP ScrollTrigger, Lenis, frame extraction, asset optimization, layout, copy That pipeline was the moat. It justified the invoice. It just collapsed into Claude Code + Higgsfield running in one pass. The gap nobody wants to say out loud: → Agency build: $6,000-$35,000+ → Real cost now: a Claude sub + a few dollars of credits → Timeline: weeks → a single session Follow me + reply "web-site" to this post and I will send you the step-by-step Playbook 👇
0:16

STUDIOS QUOTE $35,000 FOR THIS WEBSITE. A FULLY ANIMATED, SCROLL-DRIVEN BUILD - CINEMATIC CLIPS, FILM GRAIN, GLASS CARDS - SHIPPED IN ONE SESSION FOR $12. Scroll it and one question won't leave: did an AI really assemble all of this in a single pass? For studios quoting $35,000 and billing $100-149/hr, that question lands like a verdict. Here's what the page actually runs: → Motion clips generated from 30+ models - not stock, not hand-shot → Scroll animations written automatically - zero hand-coded keyframes → Six cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing What that used to require: → A designer, a motion artist, and a developer → Weeks of handoffs → Six systems wired by hand - GSAP ScrollTrigger, Lenis, frame extraction, asset optimization, layout, copy That pipeline was the moat. It justified the invoice. It just collapsed into Claude Code + Higgsfield running in one pass. The gap nobody wants to say out loud: → Agency build: $6,000-$35,000+ → Real cost now: a Claude sub + a few dollars of credits → Timeline: weeks → a single session Follow me + reply "web-site" to this post and I will send you the step-by-step Playbook 👇

ZEUS⚡️

56,569 Aufrufe • vor 23 Tagen

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇
0:19

A SOLO CREATOR JUST SHIPPED A $35,000-TIER ANIMATED SITE IN ONE WEEKEND - WITH CLAUDE CODE + HIGGSFIELD, FOR THE COST OF A SUBSCRIPTION. What you're looking at isn't a template. It's a fully animated, scroll-driven site, generated end to end in a single agentic session. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - not a single hand-coded keyframe → 6 cinematic effects baked in with zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question keeps surfacing: a person didn't build this by hand… did they? For studios billing $100-149/hr, that question lands like a verdict. What this normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between all three → 6 systems wired by hand - GSAP ScrollTrigger, Lenis smooth-scroll, frame extraction, asset optimization, layout, copy That pipeline was the moat. It's what justified the invoice. Here's the part the agency won't put in its pitch deck. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Your cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → one session One operator now runs all six systems in a single pass and ships a working site - without opening a frame extractor or writing one CSS keyframe. Full breakdown of how it's built in the article below. Save it & read today 👇

ZEUS⚡️

21,598 Aufrufe • vor 1 Monat

HE BUILT A $10,000-TIER ANIMATED SITE WITH CLAUDE CODE - FOR THE COST OF A SUBSCRIPTION What's on screen isn't a landing page with a parallax background It's a fully interactive, scroll-driven site with real-time 3D rendered in the browser What's actually on the page: > 3D product models rotating and reacting to scroll in real time via WebGL > Smooth hover interactions and transitions - no hand-coded keyframes > Cinematic minimal aesthetic that got featured on Awwwards > Typography layering, editorial layouts, everything assembled in one session What it normally takes: > A 3D artist, a motion designer, and a frontend developer > Weeks of handoffs - modelling, exporting, wiring animations, layout, copy > Six separate systems integrated by hand That pipeline was the moat. It's what justified the invoice The price gap: > Studio build at this level: $5,000-10,000+ > Your cost: a Claude subscription Timeline: weeks of production -> a single session Full walkthrough in the article below
0:16

HE BUILT A $10,000-TIER ANIMATED SITE WITH CLAUDE CODE - FOR THE COST OF A SUBSCRIPTION What's on screen isn't a landing page with a parallax background It's a fully interactive, scroll-driven site with real-time 3D rendered in the browser What's actually on the page: > 3D product models rotating and reacting to scroll in real time via WebGL > Smooth hover interactions and transitions - no hand-coded keyframes > Cinematic minimal aesthetic that got featured on Awwwards > Typography layering, editorial layouts, everything assembled in one session What it normally takes: > A 3D artist, a motion designer, and a frontend developer > Weeks of handoffs - modelling, exporting, wiring animations, layout, copy > Six separate systems integrated by hand That pipeline was the moat. It's what justified the invoice The price gap: > Studio build at this level: $5,000-10,000+ > Your cost: a Claude subscription Timeline: weeks of production -> a single session Full walkthrough in the article below

monokern

699,094 Aufrufe • vor 24 Tagen

How I built with Claude 👇 1. Structure it as 6 individual 3D scenes per product 2. Design each scene as an intimate alcove with its own world 3. Use scroll to move between scenes 4. Add hidden gestures that reward curious users 5. Pair a custom soundscape to each environment 6. Let the 3D render carry the story 7. This is how luxury brands sell without selling 8. Save this if you want websites that feel like walking into a store 🏆
0:16

How I built with Claude 👇 1. Structure it as 6 individual 3D scenes per product 2. Design each scene as an intimate alcove with its own world 3. Use scroll to move between scenes 4. Add hidden gestures that reward curious users 5. Pair a custom soundscape to each environment 6. Let the 3D render carry the story 7. This is how luxury brands sell without selling 8. Save this if you want websites that feel like walking into a store 🏆

FHILY👑

75,220 Aufrufe • vor 2 Monaten

THIS GUY JUST REBUILT A $35,000 ANIMATED SITE FOR $12. IF YOU RUN A WEB STUDIO, YOU SHOULD PROBABLY KEEP SCROLLING. Every agency billing $100-149/hr is selling you five departments wearing one invoice. Here’s each one - collapsed into a single agentic session. LAYER 1 - THE CONCEPT ROOM (Claude) Reads the brief, pulls references, and scripts the scroll: what the visitor feels at second 3, second 15, second 40. → Used to be a strategist and a wall of mood boards. Now it’s a conversation. LAYER 2 - THE MOTION STUDIO (Higgsfield) Cinematic clips from 30+ generative models - hero shots, transitions, ambient loops - all matched to the story from Layer 1. → Used to be a motion artist on retainer. Now it’s a prompt. LAYER 3 - THE DEV TEAM (Claude Code) Scaffolds the site, writes the GSAP ScrollTrigger timelines and Lenis smooth-scroll, extracts frames, optimizes every asset. → A full scroll-driven build with zero hand-coded keyframes. LAYER 4 - THE DESIGN DEPT (baked-in cinematic layer) Six effects, zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing. → The polish that justified the invoice - now it ships by default. LAYER 5 - THE QA PASS (Claude) Checks load speed, mobile breakpoints, and whether the scroll actually lands - then rewrites whatever doesn’t. → Used to be a client call and a revision cycle. Now it’s one more turn in the same session. Five departments. One operator. One pass. A strategist, a motion artist, a developer, a designer, and a QA lead - weeks of handoffs - now run in a single session. For a Claude subscription and a few dollars of Higgsfield credits. The studio was never selling talent. It was selling overhead. And the overhead just became five layers. Follow me, reply “website” to this post and I will send you the step-by-step Playbook 👇
0:14

THIS GUY JUST REBUILT A $35,000 ANIMATED SITE FOR $12. IF YOU RUN A WEB STUDIO, YOU SHOULD PROBABLY KEEP SCROLLING. Every agency billing $100-149/hr is selling you five departments wearing one invoice. Here’s each one - collapsed into a single agentic session. LAYER 1 - THE CONCEPT ROOM (Claude) Reads the brief, pulls references, and scripts the scroll: what the visitor feels at second 3, second 15, second 40. → Used to be a strategist and a wall of mood boards. Now it’s a conversation. LAYER 2 - THE MOTION STUDIO (Higgsfield) Cinematic clips from 30+ generative models - hero shots, transitions, ambient loops - all matched to the story from Layer 1. → Used to be a motion artist on retainer. Now it’s a prompt. LAYER 3 - THE DEV TEAM (Claude Code) Scaffolds the site, writes the GSAP ScrollTrigger timelines and Lenis smooth-scroll, extracts frames, optimizes every asset. → A full scroll-driven build with zero hand-coded keyframes. LAYER 4 - THE DESIGN DEPT (baked-in cinematic layer) Six effects, zero config: film grain, particles, vignette, glass cards, color tints, scroll pacing. → The polish that justified the invoice - now it ships by default. LAYER 5 - THE QA PASS (Claude) Checks load speed, mobile breakpoints, and whether the scroll actually lands - then rewrites whatever doesn’t. → Used to be a client call and a revision cycle. Now it’s one more turn in the same session. Five departments. One operator. One pass. A strategist, a motion artist, a developer, a designer, and a QA lead - weeks of handoffs - now run in a single session. For a Claude subscription and a few dollars of Higgsfield credits. The studio was never selling talent. It was selling overhead. And the overhead just became five layers. Follow me, reply “website” to this post and I will send you the step-by-step Playbook 👇

ZEUS⚡️

134,166 Aufrufe • vor 22 Tagen

I built a clone of the Yeezy store with Next.js. This was a fun challenge — the site has some smooth animations and feels very fast. But it was bothering me that I couldn't use the browser back button. Can we do better? So I rebuilt the site with v0 and Motion. Here's how it works: 1. When you click on a product, Motion is able to animate the original position of the product in the grid, to the zoomed in product detail page. 2. During this transition, we also shallow update the URL with the `/p/slug` route for the page. 3. If you press the back button in the navbar, or use the browser back button, or press escape — all options will take you back to the main product listing page. 4. If you reload the page while looking at a product, or someone sends you a link to a specific product, it still works! This is the best parts of a SPA and MPA mixed together. In the future, I can make this even better with View Transitions (I wasn't able to get the product animation just right, but if you can I'd love to see it!). I also took some creative liberties from the original design. The whole 1/2/3 size thing, where you needed to click the "?" to see SM/MD/LG was strange, so I just went directly to those sizes. Similarly, I prefered the more traditional style sheet/modal with the background color change, versus the full screen takeover. If you wanted to actually hook this up to Shopify now, you can swap the cart implementation with Next.js Commerce, which has all the APIs you need + optimistic writes 🔥 Should I make a video walking through the code?
0:16

I built a clone of the Yeezy store with Next.js. This was a fun challenge — the site has some smooth animations and feels very fast. But it was bothering me that I couldn't use the browser back button. Can we do better? So I rebuilt the site with v0 and Motion. Here's how it works: 1. When you click on a product, Motion is able to animate the original position of the product in the grid, to the zoomed in product detail page. 2. During this transition, we also shallow update the URL with the `/p/slug` route for the page. 3. If you press the back button in the navbar, or use the browser back button, or press escape — all options will take you back to the main product listing page. 4. If you reload the page while looking at a product, or someone sends you a link to a specific product, it still works! This is the best parts of a SPA and MPA mixed together. In the future, I can make this even better with View Transitions (I wasn't able to get the product animation just right, but if you can I'd love to see it!). I also took some creative liberties from the original design. The whole 1/2/3 size thing, where you needed to click the "?" to see SM/MD/LG was strange, so I just went directly to those sizes. Similarly, I prefered the more traditional style sheet/modal with the background color change, versus the full screen takeover. If you wanted to actually hook this up to Shopify now, you can swap the cart implementation with Next.js Commerce, which has all the APIs you need + optimistic writes 🔥 Should I make a video walking through the code?

Lee Robinson

148,840 Aufrufe • vor 1 Jahr

THIS FREE BROWSER TOOL LETS YOU BUILD REAL-TIME DITHER ANIMATIONS AND EXPORT THEM AS VIDEO dither is everywhere right now (Spotify, websites, album covers) but every tool for making it is either a Photoshop plugin or some after effects rabbit hole. this one runs in your browser and gives you full control over the motion. what you can do: > choose from Bayer 4x4, 8x8, halftone, blue noise, crosshatch, diamond, spiral, and ASCII patterns > animate with speed, intensity, scale, and FPS controls > add text or 3D rotation with auto-spin and flatten > tune foreground, background, and accent colors or pick from palettes > post-processing effects layered on top > export as PNG, WebM, MP4, or embed HTML to drop on a site > save presets to reuse your favorite looks resolution presets go up to 1920x1080 for landscape and 1080x1920 for portrait, plus custom sizes. most generative art tools online are single-style gimmicks. this is a full-blown animation studio for one specific aesthetic, and it looks like a real product. link in replies 👇
0:11

THIS FREE BROWSER TOOL LETS YOU BUILD REAL-TIME DITHER ANIMATIONS AND EXPORT THEM AS VIDEO dither is everywhere right now (Spotify, websites, album covers) but every tool for making it is either a Photoshop plugin or some after effects rabbit hole. this one runs in your browser and gives you full control over the motion. what you can do: > choose from Bayer 4x4, 8x8, halftone, blue noise, crosshatch, diamond, spiral, and ASCII patterns > animate with speed, intensity, scale, and FPS controls > add text or 3D rotation with auto-spin and flatten > tune foreground, background, and accent colors or pick from palettes > post-processing effects layered on top > export as PNG, WebM, MP4, or embed HTML to drop on a site > save presets to reuse your favorite looks resolution presets go up to 1920x1080 for landscape and 1080x1920 for portrait, plus custom sizes. most generative art tools online are single-style gimmicks. this is a full-blown animation studio for one specific aesthetic, and it looks like a real product. link in replies 👇

Creators Toolbox

28,982 Aufrufe • vor 3 Monaten

Claude + GPT Image 2 + Seedance + Meta Ads MCP Just fired my $10k/month performance marketing agency. Here's the exact stack (and how it runs): Step 1: Research Hand Claude your product page, your competitors' pages, and your best ad angles. It spits out a full brand brief + competitor breakdown in minutes. No strategist. No $200/hour consultant. Step 2: Static ads in seconds Claude crafts image prompts from your brief. Drop those into GPT Image 2. You get scroll-stopping creative. Batched. On-brand. No Figma needed. Step 3: Video ads that convert Claude writes video prompts. Feed them into Seedance 2.0. UGC-style clips. AI actor formats. Product showcases. All generated. Zero filming. (Both GPT Image 2 + Seedance are live on HeyOz right now.) Step 4: Publish + optimize on autopilot Hook Claude into Meta Ads MCP. It pushes your creatives live, tracks performance, and keeps iterating. Your agency was billing you hourly for this exact thing. I documented the full workflow in a guide: prompts, setup, and the exact MCP config. Why this matters: Most brands are still bleeding money on slow, overpriced creative production. The ones who crack this in the next 90 days will own an unfair advantage. Don't be the brand that figures it out too late. Comment "REPLACE" and I'll DM it to you.
0:10

Claude + GPT Image 2 + Seedance + Meta Ads MCP Just fired my $10k/month performance marketing agency. Here's the exact stack (and how it runs): Step 1: Research Hand Claude your product page, your competitors' pages, and your best ad angles. It spits out a full brand brief + competitor breakdown in minutes. No strategist. No $200/hour consultant. Step 2: Static ads in seconds Claude crafts image prompts from your brief. Drop those into GPT Image 2. You get scroll-stopping creative. Batched. On-brand. No Figma needed. Step 3: Video ads that convert Claude writes video prompts. Feed them into Seedance 2.0. UGC-style clips. AI actor formats. Product showcases. All generated. Zero filming. (Both GPT Image 2 + Seedance are live on HeyOz right now.) Step 4: Publish + optimize on autopilot Hook Claude into Meta Ads MCP. It pushes your creatives live, tracks performance, and keeps iterating. Your agency was billing you hourly for this exact thing. I documented the full workflow in a guide: prompts, setup, and the exact MCP config. Why this matters: Most brands are still bleeding money on slow, overpriced creative production. The ones who crack this in the next 90 days will own an unfair advantage. Don't be the brand that figures it out too late. Comment "REPLACE" and I'll DM it to you.

Ahad Shams

17,993 Aufrufe • vor 2 Monaten

I built a full 3D #lego brick builder using Claude 4.6. Took 12 iterations. Runs entirely in the browser. You pick a brick size, pick a color, and click to place. Snap-to-grid, collision detection, ghost preview, it feels like building with real bricks. But the fun part? Hit one of the template buttons and watch it auto-build a pyramid, a rocket, a house, or an Eiffel Tower. Bricks fly in from random directions, spin through the air, and snap into place with particle bursts. tech stack: → #Threejs for the full 3D scene → #Raycasting for click-to-place → Custom wedge geometry for slope bricks → Quadratic Bézier curves for the fly-in animations → #2d canvas particle system layered on top of the 3D scene → #InstancedMesh for the base plate studs The product potential: this could become a real educational toy. Kids (or adults) building in the browser, sharing creations, loading custom templates. No install, no app store. ( LEGO you may like this one! ) Want to try it? Link in the first comment 👇
0:17

I built a full 3D #lego brick builder using Claude 4.6. Took 12 iterations. Runs entirely in the browser. You pick a brick size, pick a color, and click to place. Snap-to-grid, collision detection, ghost preview, it feels like building with real bricks. But the fun part? Hit one of the template buttons and watch it auto-build a pyramid, a rocket, a house, or an Eiffel Tower. Bricks fly in from random directions, spin through the air, and snap into place with particle bursts. tech stack: → #Threejs for the full 3D scene → #Raycasting for click-to-place → Custom wedge geometry for slope bricks → Quadratic Bézier curves for the fly-in animations → #2d canvas particle system layered on top of the 3D scene → #InstancedMesh for the base plate studs The product potential: this could become a real educational toy. Kids (or adults) building in the browser, sharing creations, loading custom templates. No install, no app store. ( LEGO you may like this one! ) Want to try it? Link in the first comment 👇

Hasan Aboul Hasan

13,762 Aufrufe • vor 3 Monaten

home page hero ✨ Design notes: - "Forever" hero text dot pixel FX done in unicorn.studio. (I will do a whole tutorial on this later. Unicorn's WebGL engine is absolutely wild and very powerful / robust) - built in Framer - I wanted to recreate the iOS unlock effect where your home screen icons cascade into place in a beautifully timed choreography. This took a lot of careful timing using Framer's "Appear" effect on the hero text and surrounding avatars because it was super important that we didn't lose the legibility of our main message ("Build Your Forever Audience") with all the animations. - If you look closely, the choreography is setup to lead your eye through the hero text first starting with "Build Your" then "Forever" and finally "Audience." - With those text layers in place + the surrounding avatars, there is a slight 1 sec pause before the remaining elements slide in below and above (How it works, CTA buttons, announcement badge, and lastly the main nav). - All told the entire loading sequence is 6 seconds - Custom particle system powers the interactive star field (the stars slowly gravitate to your pointer position, and the star field perspective changes ever so subtly as you move your mouse around on the page) - I have 3 shooting stars made of small white line layers that start out off canvas rotated at different angles that shoot across to another point off canvas at random times on a loop effect. - Given this hero scene is in space, I wanted the surrounding avatar elements to "float" in low gravity mode. For this I used Framer's loop effect that slowly oscillates the layer's y position. I then offset the delay of each element randomly to stagger the floating loop so each avatar floats independently/randomly - The final major treatment for this hero scene was the scroll animations on the avatars. I wanted to create a bit of a warp speed effect when you scroll down, as if the avatars were being pulled or sucked into a worm hole as you scroll down below this hero fold. - To accomplish this, I applied Framer's scroll transform affect set to "section in view" on each of the floating avatars, and set the "scroll to" position of the upper avatars to be much, much further away on the y-axis than the "scroll to" position of the lower avatars. (eg. -1700px on upper most avatars vs. -600px on lowest positioned avatars). This effectively causes the upper avatars to slide up off the hero canvas with much greater velocity than the lower positioned avatars. - And when you scroll back up to the hero section, the inverse happens where the lower positioned avatars "arrive back in place" from up above the hero canvas before the upper avatars come back into the scene and settle in place. - Overall I wanted this hero section to feel alive. The floating avatars, particle system with very subtle star movements, and the Caustics effect on the "Forever" text all sort of move at the pace of slow breathing - which is a great pace to create a sense of life and comfort in your scene. Conversion Results (so far) - When this new Framer site launched along with Calaxy v1.9 release on Base a couple weeks ago, we saw a surge in traffic, around 20k page views in the first few days. - Of those 20k hits, 11k visited the app install page ( - which is our main CTA - We saw around 10K new users in the first week after v1.9 launch Overall I'm very happy with the new site and early performance metrics. Lots of tweaking to do but its a good start. If you are a designer building in Framer - hit me with any questions on the above hero notes. Happy to share more specifics! 👾
0:12

home page hero ✨ Design notes: - "Forever" hero text dot pixel FX done in unicorn.studio. (I will do a whole tutorial on this later. Unicorn's WebGL engine is absolutely wild and very powerful / robust) - built in Framer - I wanted to recreate the iOS unlock effect where your home screen icons cascade into place in a beautifully timed choreography. This took a lot of careful timing using Framer's "Appear" effect on the hero text and surrounding avatars because it was super important that we didn't lose the legibility of our main message ("Build Your Forever Audience") with all the animations. - If you look closely, the choreography is setup to lead your eye through the hero text first starting with "Build Your" then "Forever" and finally "Audience." - With those text layers in place + the surrounding avatars, there is a slight 1 sec pause before the remaining elements slide in below and above (How it works, CTA buttons, announcement badge, and lastly the main nav). - All told the entire loading sequence is 6 seconds - Custom particle system powers the interactive star field (the stars slowly gravitate to your pointer position, and the star field perspective changes ever so subtly as you move your mouse around on the page) - I have 3 shooting stars made of small white line layers that start out off canvas rotated at different angles that shoot across to another point off canvas at random times on a loop effect. - Given this hero scene is in space, I wanted the surrounding avatar elements to "float" in low gravity mode. For this I used Framer's loop effect that slowly oscillates the layer's y position. I then offset the delay of each element randomly to stagger the floating loop so each avatar floats independently/randomly - The final major treatment for this hero scene was the scroll animations on the avatars. I wanted to create a bit of a warp speed effect when you scroll down, as if the avatars were being pulled or sucked into a worm hole as you scroll down below this hero fold. - To accomplish this, I applied Framer's scroll transform affect set to "section in view" on each of the floating avatars, and set the "scroll to" position of the upper avatars to be much, much further away on the y-axis than the "scroll to" position of the lower avatars. (eg. -1700px on upper most avatars vs. -600px on lowest positioned avatars). This effectively causes the upper avatars to slide up off the hero canvas with much greater velocity than the lower positioned avatars. - And when you scroll back up to the hero section, the inverse happens where the lower positioned avatars "arrive back in place" from up above the hero canvas before the upper avatars come back into the scene and settle in place. - Overall I wanted this hero section to feel alive. The floating avatars, particle system with very subtle star movements, and the Caustics effect on the "Forever" text all sort of move at the pace of slow breathing - which is a great pace to create a sense of life and comfort in your scene. Conversion Results (so far) - When this new Framer site launched along with Calaxy v1.9 release on Base a couple weeks ago, we saw a surge in traffic, around 20k page views in the first few days. - Of those 20k hits, 11k visited the app install page ( - which is our main CTA - We saw around 10K new users in the first week after v1.9 launch Overall I'm very happy with the new site and early performance metrics. Lots of tweaking to do but its a good start. If you are a designer building in Framer - hit me with any questions on the above hero notes. Happy to share more specifics! 👾

Chadd Weston

15,697 Aufrufe • vor 9 Monaten

Met my girlfriend's parents for the first time. Her dad asked what I do for work. I said I build trading systems. He said like Wall Street? I said no. 6 AI agents. They work while I sleep. He laughed. So robots are making you money? I did not argue. I opened my laptop. Showed him the terminal. 6 agents running. 47 mispriced markets caught in the first week alone. His face changed. That is not gambling. That is automation? Exactly. Then I showed him how it works. Built the whole thing in 6 hours. Agent 1: Monitoring Runs 24/7. Watches Polymarket for mispriced markets. Spots an anomaly. Writes to memory and pings me on Telegram instantly. Agent 2: Research Parses news, X, macro data via browser tool on a cron schedule. Every morning I have a full digest on all open positions before I check my phone. Agent 3: Trading Reads the research agent memory. Sees the market has not reacted yet. Acts. Execution tool in gateway mode with a whitelist. No full access on a live server. Agent 4: Watchdog Heartbeat every 5 minutes. Monitoring running. No errors. Positions up to date. Something breaks. Immediate Telegram message. All of this. One Gateway. One config file. Isolation via per-agent scope. The token trick: stopped dumping everything into one file. Critical rules in bootstrap. Markets, patterns, past trades in memory. Semantic search pulls it when needed. Token spend dropped 3x. From $0.40 per request to $0.13. First week running: → 47 mispriced markets caught before Polymarket adjusted → Average entry edge 8 to 12 cents per position → Watchdog fired 3 times and caught a broken RPC before it cost me anything The whole system is plain text files. Open an editor. Change one line. Agent behaves differently. No deploy. No build. Her dad went quiet. Then he asked can you teach this? Her mom asked for the setup guide. I built the entire framework. Six agents. Full deployment. Memory architecture. Telegram alerts. You only need Claude + device + 1 hour per day. Giving this free for 24 hours. To get it: 1. Comment the word "Claude" 2. Like and retweet this 3. Follow me Himanshu Kumar so I can DM you Save this post. Deploy the 6-agent system this week. Start with $200. Scale on evidence.
0:16

Met my girlfriend's parents for the first time. Her dad asked what I do for work. I said I build trading systems. He said like Wall Street? I said no. 6 AI agents. They work while I sleep. He laughed. So robots are making you money? I did not argue. I opened my laptop. Showed him the terminal. 6 agents running. 47 mispriced markets caught in the first week alone. His face changed. That is not gambling. That is automation? Exactly. Then I showed him how it works. Built the whole thing in 6 hours. Agent 1: Monitoring Runs 24/7. Watches Polymarket for mispriced markets. Spots an anomaly. Writes to memory and pings me on Telegram instantly. Agent 2: Research Parses news, X, macro data via browser tool on a cron schedule. Every morning I have a full digest on all open positions before I check my phone. Agent 3: Trading Reads the research agent memory. Sees the market has not reacted yet. Acts. Execution tool in gateway mode with a whitelist. No full access on a live server. Agent 4: Watchdog Heartbeat every 5 minutes. Monitoring running. No errors. Positions up to date. Something breaks. Immediate Telegram message. All of this. One Gateway. One config file. Isolation via per-agent scope. The token trick: stopped dumping everything into one file. Critical rules in bootstrap. Markets, patterns, past trades in memory. Semantic search pulls it when needed. Token spend dropped 3x. From $0.40 per request to $0.13. First week running: → 47 mispriced markets caught before Polymarket adjusted → Average entry edge 8 to 12 cents per position → Watchdog fired 3 times and caught a broken RPC before it cost me anything The whole system is plain text files. Open an editor. Change one line. Agent behaves differently. No deploy. No build. Her dad went quiet. Then he asked can you teach this? Her mom asked for the setup guide. I built the entire framework. Six agents. Full deployment. Memory architecture. Telegram alerts. You only need Claude + device + 1 hour per day. Giving this free for 24 hours. To get it: 1. Comment the word "Claude" 2. Like and retweet this 3. Follow me Himanshu Kumar so I can DM you Save this post. Deploy the 6-agent system this week. Start with $200. Scale on evidence.

Himanshu Kumar

46,705 Aufrufe • vor 1 Monat