Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

How I built with Claude 👇 1. CSS linear-gradient animated backgrounds create that deep blue oceanic atmosphere with zero images 2. Intersection Observer API staggers each section headline in as users scroll through the content 3.Use a fixed sticky nav with backdrop-filter blur signals authority and keeps users oriented...

Oluwaphilemon1's profile picture

FHILY👑

7,954 subscribers

138,336 görüntüleme • 2 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 2 ay önce

How I built with Lovable 👇 1. Start with midnight blue + soft sand feels cinematic instantly 2. Tell Lovable to make it a single scroll page with scene transitions 3. Add a lone figure walking through a dreamy 3D landscape 4. Each scroll section reveals a new sleep science fact 5. Use CSS fluid shapes for organic background movement 6. Wide spacing + slow fade-ins let the content breathe 7. Deploy in one click no code, no agency, no $10k budget
0:16

How I built with Lovable 👇 1. Start with midnight blue + soft sand feels cinematic instantly 2. Tell Lovable to make it a single scroll page with scene transitions 3. Add a lone figure walking through a dreamy 3D landscape 4. Each scroll section reveals a new sleep science fact 5. Use CSS fluid shapes for organic background movement 6. Wide spacing + slow fade-ins let the content breathe 7. Deploy in one click no code, no agency, no $10k budget

FHILY👑

96,872 görüntüleme • 2 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 2 ay önce

messy inputs 👉🏽 polished outputs built a prototype with the idea of letting users bring together images from Lummi into a canvas, quickly wireframe a concept, and then generate polished images as a photo, illustration, 3d render, whatever—with the right lighting, shadows, cohesive colors, and all that good stuff the output is still not great... but this is where I see the future of creative tools heading—kind of like how you give ChatGPT an idea for an email—all the messy bits—and it writes it for you in any tone or style you want in a clear way. now imagine that but for design or imagery
0:16

messy inputs 👉🏽 polished outputs built a prototype with the idea of letting users bring together images from Lummi into a canvas, quickly wireframe a concept, and then generate polished images as a photo, illustration, 3d render, whatever—with the right lighting, shadows, cohesive colors, and all that good stuff the output is still not great... but this is where I see the future of creative tools heading—kind of like how you give ChatGPT an idea for an email—all the messy bits—and it writes it for you in any tone or style you want in a clear way. now imagine that but for design or imagery

Pablo Stanley

12,109 görüntüleme • 1 yıl önce

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.
0:15

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.

Leon Lin

72,887 görüntüleme • 5 ay önce

FABLE 5 + HIGGSFIELD TURN A $35,000 ANIMATED SITE INTO A ONE-SESSION, $12 BUILD. HERE'S EXACTLY HOW. a studio runs this across four people and three weeks. you run it across one chat window and one afternoon. THE BUILD, STAGE BY STAGE: STAGE 1 - THE CONCEPT Claude reads your brief and scripts the scroll before a line of code exists - what the visitor feels at second 3, 15, 40. prompt: "read this brief. script the scroll beat by beat, then scaffold the project with GSAP ScrollTrigger + Lenis." STAGE 2 - THE VISUALS (Higgsfield) every hero shot, transition, and ambient loop comes out of 30+ generative models - matched to the story, not pulled from a stock library. prompt: "generate the hero sting and one b-roll clip per section. 3-5s, high-res, cinematic." STAGE 3 - THE MOTION (Claude Code) Claude writes the ScrollTrigger timelines and Lenis smooth-scroll, extracts frames, optimizes every asset. zero hand-coded keyframes. prompt: "wire the scroll: pin the hero, scrub the video, reveal each section on scroll. keep it 60fps on mobile." STAGE 4 - THE POLISH six cinematic effects baked in, no config: film grain, particles, vignette, glass cards, color tints, scroll pacing. prompt: "bake in the cinematic layer, then QA load speed, mobile breakpoints, and whether the scroll actually lands - rewrite what doesn't." CONNECT HIGGSFIELD (MCP): add it as a custom connector in Claude Code: mcp_servers: higgsfield: url: " one OAuth flow. Claude generates and pulls clips directly - no exporting by hand. THE MATH: → what a studio charges: $6,000-$35,000+ → what it costs you: a Claude sub + a few dollars of Higgsfield credits → what it takes: 4 people + 3 weeks → 1 operator + 1 session the pipeline was the moat. it just became four prompts. Follow me, comment "MATH" and I'll send you the full step-by-step Playbook. full breakdown in the article 👇
0:11

FABLE 5 + HIGGSFIELD TURN A $35,000 ANIMATED SITE INTO A ONE-SESSION, $12 BUILD. HERE'S EXACTLY HOW. a studio runs this across four people and three weeks. you run it across one chat window and one afternoon. THE BUILD, STAGE BY STAGE: STAGE 1 - THE CONCEPT Claude reads your brief and scripts the scroll before a line of code exists - what the visitor feels at second 3, 15, 40. prompt: "read this brief. script the scroll beat by beat, then scaffold the project with GSAP ScrollTrigger + Lenis." STAGE 2 - THE VISUALS (Higgsfield) every hero shot, transition, and ambient loop comes out of 30+ generative models - matched to the story, not pulled from a stock library. prompt: "generate the hero sting and one b-roll clip per section. 3-5s, high-res, cinematic." STAGE 3 - THE MOTION (Claude Code) Claude writes the ScrollTrigger timelines and Lenis smooth-scroll, extracts frames, optimizes every asset. zero hand-coded keyframes. prompt: "wire the scroll: pin the hero, scrub the video, reveal each section on scroll. keep it 60fps on mobile." STAGE 4 - THE POLISH six cinematic effects baked in, no config: film grain, particles, vignette, glass cards, color tints, scroll pacing. prompt: "bake in the cinematic layer, then QA load speed, mobile breakpoints, and whether the scroll actually lands - rewrite what doesn't." CONNECT HIGGSFIELD (MCP): add it as a custom connector in Claude Code: mcp_servers: higgsfield: url: " one OAuth flow. Claude generates and pulls clips directly - no exporting by hand. THE MATH: → what a studio charges: $6,000-$35,000+ → what it costs you: a Claude sub + a few dollars of Higgsfield credits → what it takes: 4 people + 3 weeks → 1 operator + 1 session the pipeline was the moat. it just became four prompts. Follow me, comment "MATH" and I'll send you the full step-by-step Playbook. full breakdown in the article 👇

ZEUS⚡️

47,138 görüntüleme • 24 gün önce

A WEB STUDIO CHARGES $35,000 FOR AN ANIMATED SITE. THE SAME BUILD NOW COSTS $12 - CLAUDE CODE WRITES, HIGGSFIELD RENDERS. Every agency billing $100-149/hr is just three departments. Here's each one, collapsed into a single agentic session. SYSTEM 1 - THE MOTION STUDIO (Higgsfield) Cinematic clips pulled from 30+ generative models - hero shots, transitions, ambient loops. → This used to be a motion artist on retainer. Now it's a prompt. SYSTEM 2 - 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. SYSTEM 3 - THE DESIGN DEPT (baked-in cinematic layer) Six effects with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing. → The polish that justified the invoice - now it ships by default. Three departments. One operator. One pass. What used to take a designer, a motion artist, and a developer through weeks of handoffs now runs in a single session - for a Claude subscription and a few dollars of Higgsfield credits. The studio was never the talent. It was the overhead. And the overhead just became three systems. Reply "web-site" to this post and I will send you the step-by-step Playbook 👇
0:10

A WEB STUDIO CHARGES $35,000 FOR AN ANIMATED SITE. THE SAME BUILD NOW COSTS $12 - CLAUDE CODE WRITES, HIGGSFIELD RENDERS. Every agency billing $100-149/hr is just three departments. Here's each one, collapsed into a single agentic session. SYSTEM 1 - THE MOTION STUDIO (Higgsfield) Cinematic clips pulled from 30+ generative models - hero shots, transitions, ambient loops. → This used to be a motion artist on retainer. Now it's a prompt. SYSTEM 2 - 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. SYSTEM 3 - THE DESIGN DEPT (baked-in cinematic layer) Six effects with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing. → The polish that justified the invoice - now it ships by default. Three departments. One operator. One pass. What used to take a designer, a motion artist, and a developer through weeks of handoffs now runs in a single session - for a Claude subscription and a few dollars of Higgsfield credits. The studio was never the talent. It was the overhead. And the overhead just became three systems. Reply "web-site" to this post and I will send you the step-by-step Playbook 👇

ZEUS⚡️

173,520 görüntüleme • 1 ay önce

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 görüntüleme • 1 ay önce

THIS SITE COST AROUND $12 IN CREDITS TO BUILD. STUDIOS QUOTE $35,000 FOR THE SAME THING. What's on screen isn't a basic landing page. It's a fully animated, scroll-driven site, generated end to end in one agentic session with Claude Code + Higgsfield. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - zero hand-coded keyframes → 6 cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question won't go away: did Claude really assemble all of this in a single pass? For boutique studios billing $100-149/hr, that question lands like a verdict. What it normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between them → 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 studios and their clients won't enjoy hearing. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Delivery cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → a single session One operator can now run all six systems in one pass and ship a working site - without touching a frame extractor or writing a CSS keyframe by hand. Full breakdown of how it's built in the article below. Save it & read today 👇
0:10

THIS SITE COST AROUND $12 IN CREDITS TO BUILD. STUDIOS QUOTE $35,000 FOR THE SAME THING. What's on screen isn't a basic landing page. It's a fully animated, scroll-driven site, generated end to end in one agentic session with Claude Code + Higgsfield. What's actually on the page: → Cinematic motion clips pulled from 30+ generative models → Scroll animations written automatically - zero hand-coded keyframes → 6 cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing Scroll the demo and one question won't go away: did Claude really assemble all of this in a single pass? For boutique studios billing $100-149/hr, that question lands like a verdict. What it normally takes: → A designer, a motion artist, and a developer → Weeks of handoffs between them → 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 studios and their clients won't enjoy hearing. The price gap: → Boutique agency build: $6,000-$35,000+ → Industry average project: ~$5,280 → Delivery cost: a Claude subscription + a few dollars of Higgsfield credits → Timeline: weeks of production → a single session One operator can now run all six systems in one pass and ship a working site - without touching a frame extractor or writing a CSS keyframe by hand. Full breakdown of how it's built in the article below. Save it & read today 👇

ZEUS⚡️

477,187 görüntüleme • 1 ay önce

Code Interpreter in ChatGPT is incredible! Took me 5 mins to make this game. You can make your own game assets with any AI generator and then ask GPT-4 with Code Interpreter to write code. If you have any problems you can ask it to fix the errors. 1. Write this prompt: "write p5.js code for Asteroids where you control a spaceship with the mouse and shoot asteroids with the left click of the mouse. If your spaceship collides with an asteroid, you lose. If you shoot down all asteroids, you win! I want to use my own textures for the spaceship and for asteroids." 2. Go to Openprocessing website create and save sketch (you'll need to save it before uploading any texture files). Copy paste code from GPT-4 3. Generate texture files and remove backgrounds, for example in Clip Drop 4. Replace names of files with your filenames 5. Run the program 6. If something doesn't work ask GPT-4 to fix it (you can copy an error and paste in GPT-4) like you would ask a human programmer 7. To learn a bit of programming write these prompts to GPT-4: "Act as my programming teacher. Tell me an algorithm of Asteroids game in detail and make names of functions and explain what each of these functions will do. Don't write the code just yet." and then " Can you describe the algorithm overall for a 10-year-old child"
0:10

Code Interpreter in ChatGPT is incredible! Took me 5 mins to make this game. You can make your own game assets with any AI generator and then ask GPT-4 with Code Interpreter to write code. If you have any problems you can ask it to fix the errors. 1. Write this prompt: "write p5.js code for Asteroids where you control a spaceship with the mouse and shoot asteroids with the left click of the mouse. If your spaceship collides with an asteroid, you lose. If you shoot down all asteroids, you win! I want to use my own textures for the spaceship and for asteroids." 2. Go to Openprocessing website create and save sketch (you'll need to save it before uploading any texture files). Copy paste code from GPT-4 3. Generate texture files and remove backgrounds, for example in Clip Drop 4. Replace names of files with your filenames 5. Run the program 6. If something doesn't work ask GPT-4 to fix it (you can copy an error and paste in GPT-4) like you would ask a human programmer 7. To learn a bit of programming write these prompts to GPT-4: "Act as my programming teacher. Tell me an algorithm of Asteroids game in detail and make names of functions and explain what each of these functions will do. Don't write the code just yet." and then " Can you describe the algorithm overall for a 10-year-old child"

Kris Kashtanova

1,674,909 görüntüleme • 3 yıl önce

you can run claude code inside antigravity completely Free with zero credit card and no rate limits 😳 use openrouter’s free models + antigravity. no anthropic bill. no paid api keys. takes 10 minutes to set up. what you get during this setup: - full claude code agent experience - strong coding models (including deepseek-r1, qwen2.5-coder, llama-4, grok-4 free tier) - antigravity’s clean workspace and sandbox - unlimited usage (as long as you stay on free models) - easy model swapping - zero cost full setup guide (100% free): step 1: install antigravity -go to and install it -create a new workspace step 2: install claude code - inside antigravity, install the claude code extension from the marketplace - open the built-in terminal step 3: create openrouter free account -go to - sign up with google (no card needed) - go to keys and create a new api key step 4: set the environment variables -in antigravity terminal run: export ANTHROPIC_API_KEY=sk-or-xxx export OPENROUTER_API_KEY=sk-or-xxx step 5: launch claude code with free model -run this command: claude-code --model deepseek/deepseek-r1:free or try: qwen/qwen2.5-coder:free if you already have antigravity? skip straight to step 2. after 10 minutes you’ll have a full agentic coding setup running for free. this is currently one of the cheapest ways to run serious coding agents in 2026. bookmark this before they limit the free models.
0:17

you can run claude code inside antigravity completely Free with zero credit card and no rate limits 😳 use openrouter’s free models + antigravity. no anthropic bill. no paid api keys. takes 10 minutes to set up. what you get during this setup: - full claude code agent experience - strong coding models (including deepseek-r1, qwen2.5-coder, llama-4, grok-4 free tier) - antigravity’s clean workspace and sandbox - unlimited usage (as long as you stay on free models) - easy model swapping - zero cost full setup guide (100% free): step 1: install antigravity -go to and install it -create a new workspace step 2: install claude code - inside antigravity, install the claude code extension from the marketplace - open the built-in terminal step 3: create openrouter free account -go to - sign up with google (no card needed) - go to keys and create a new api key step 4: set the environment variables -in antigravity terminal run: export ANTHROPIC_API_KEY=sk-or-xxx export OPENROUTER_API_KEY=sk-or-xxx step 5: launch claude code with free model -run this command: claude-code --model deepseek/deepseek-r1:free or try: qwen/qwen2.5-coder:free if you already have antigravity? skip straight to step 2. after 10 minutes you’ll have a full agentic coding setup running for free. this is currently one of the cheapest ways to run serious coding agents in 2026. bookmark this before they limit the free models.

painn

32,057 görüntüleme • 2 ay önce

Fable 5 just dropped and someone already built a $10k-looking website with it. Here's the full workflow The smooth scrolling, the animations, the transitions, all built with Fable 5. Here's how to get the same result instead of a generic template. 1. Steal a direction first. Go to Mobbin or Godly and find a site whose feel you love. Screenshot it. Fable copies a vibe far better than it invents one. 2. Grab real components. Pull animation-ready blocks from Aceternity UI or Magic UI. These are built for exactly this look (scroll reveals, parallax, gradients). 3. Prompt Fable with all of it. Switch to Fable 5 in Claude Code, drop in your screenshots and the component references, and describe the sections and scroll behavior you want. Let it plan before it builds. 4. Animate with the right tools. Tell it to use GSAP with ScrollTrigger for scroll effects, or Framer Motion for React. This is what separates "nice" from "$10k." 5. Iterate on feel, not code. Preview it, then give Fable specific notes ("slower fade, more spacing on mobile") until it lands. Bookmark this
0:16

Fable 5 just dropped and someone already built a $10k-looking website with it. Here's the full workflow The smooth scrolling, the animations, the transitions, all built with Fable 5. Here's how to get the same result instead of a generic template. 1. Steal a direction first. Go to Mobbin or Godly and find a site whose feel you love. Screenshot it. Fable copies a vibe far better than it invents one. 2. Grab real components. Pull animation-ready blocks from Aceternity UI or Magic UI. These are built for exactly this look (scroll reveals, parallax, gradients). 3. Prompt Fable with all of it. Switch to Fable 5 in Claude Code, drop in your screenshots and the component references, and describe the sections and scroll behavior you want. Let it plan before it builds. 4. Animate with the right tools. Tell it to use GSAP with ScrollTrigger for scroll effects, or Framer Motion for React. This is what separates "nice" from "$10k." 5. Iterate on feel, not code. Preview it, then give Fable specific notes ("slower fade, more spacing on mobile") until it lands. Bookmark this

Fokki

72,175 görüntüleme • 1 ay önce

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,937 görüntüleme • 1 yıl önce

Is Using a Nebulizer with Food Grade Hydrogen Peroxide preventive and healing for upper respiratory symptoms? The earlier you get this in the better, so if you start feeling run down or stuffy take action sooner. ***THIS IS NOT MEDICAL ADVICE. Not only can nebulizing save you money, but also time from healing and potentially from the damage/side effects that antibiotics can have. I used a nasal mist sprayer with a 50/50 mix of 3% HP to distilled water and ate raw chopped garlic too when I had pneumonia and I relieved congestion, coughing or anything chest related. Just aches and pains. I’m all about prevention and using natural medicines first! “The inhalation of HP by nebulization has been shown to be extremely effective for the rapid elimination of any pathogen presence in the sinuses, nose, throat, and deep into the lungs.” -Dr. Levy HOW TO PREPARE HYDROGEN PEROXIDE FOR NEBULIZING 1. Add 2 tsp of 3% food grade hydrogen peroxide to 8 oz of saline water (this makes.1% dilution), if you are starting with 12% hydrogen peroxide, add 1/2 tsp to 8 oz of saline water. 2. Transfer this mix to a glass dropper bottle. 3. Use about 2-3 mL or (1/2 tsp) of this mix for each nebulizing session. 4. You can keep this solution refrigerated for a long time and continue to reuse it. Praying for your health and abundance of goodness 🙌🏼
0:12

Sensitive content

Is Using a Nebulizer with Food Grade Hydrogen Peroxide preventive and healing for upper respiratory symptoms? The earlier you get this in the better, so if you start feeling run down or stuffy take action sooner. ***THIS IS NOT MEDICAL ADVICE. Not only can nebulizing save you money, but also time from healing and potentially from the damage/side effects that antibiotics can have. I used a nasal mist sprayer with a 50/50 mix of 3% HP to distilled water and ate raw chopped garlic too when I had pneumonia and I relieved congestion, coughing or anything chest related. Just aches and pains. I’m all about prevention and using natural medicines first! “The inhalation of HP by nebulization has been shown to be extremely effective for the rapid elimination of any pathogen presence in the sinuses, nose, throat, and deep into the lungs.” -Dr. Levy HOW TO PREPARE HYDROGEN PEROXIDE FOR NEBULIZING 1. Add 2 tsp of 3% food grade hydrogen peroxide to 8 oz of saline water (this makes.1% dilution), if you are starting with 12% hydrogen peroxide, add 1/2 tsp to 8 oz of saline water. 2. Transfer this mix to a glass dropper bottle. 3. Use about 2-3 mL or (1/2 tsp) of this mix for each nebulizing session. 4. You can keep this solution refrigerated for a long time and continue to reuse it. Praying for your health and abundance of goodness 🙌🏼

Cleanse Parasites .com 🧹🪱 Herbal Cleanse Co.

46,711 görüntüleme • 3 ay önce

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.
0:13

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.

Delba

61,047 görüntüleme • 1 ay önce

Introducing Attio Objects 🚀 ​ We know how hard it is to find a CRM that fits your unique business model. ​ That's why we built Attio Objects – our powerful data model with custom objects that gives you complete flexibility to structure your CRM exactly how you need it. ​ Along with custom objects, we've also introduced new standard objects: ​ - Workspaces and Users objects for PLG businesses. - A robust Deals object for sales-driven companies. ​ This is the culmination of a 4-year effort, with 3 years of work put in even before launching Attio. ​ Since day one, we've been determined to solve the fundamental problem in the CRM space: the trade-off between power and time-to-value. ​ If you wanted power and flexibility, your CRM would take forever to build and not work well with your stack. ​ If you wanted speed, you'd need to use highly opinionated, inflexible software that doesn't really work for your business. ​ That ends today. With Attio, you no longer have to compromise. Build your CRM your way, fast. Iterate as you grow. ​ High-growth startups like Replicate, , and Modal and more are already using Attio's object architecture to perfectly match their businesses and accelerate their growth. ​ To get all the details, check out our blog post 👇 ​
0:12

Introducing Attio Objects 🚀 ​ We know how hard it is to find a CRM that fits your unique business model. ​ That's why we built Attio Objects – our powerful data model with custom objects that gives you complete flexibility to structure your CRM exactly how you need it. ​ Along with custom objects, we've also introduced new standard objects: ​ - Workspaces and Users objects for PLG businesses. - A robust Deals object for sales-driven companies. ​ This is the culmination of a 4-year effort, with 3 years of work put in even before launching Attio. ​ Since day one, we've been determined to solve the fundamental problem in the CRM space: the trade-off between power and time-to-value. ​ If you wanted power and flexibility, your CRM would take forever to build and not work well with your stack. ​ If you wanted speed, you'd need to use highly opinionated, inflexible software that doesn't really work for your business. ​ That ends today. With Attio, you no longer have to compromise. Build your CRM your way, fast. Iterate as you grow. ​ High-growth startups like Replicate, , and Modal and more are already using Attio's object architecture to perfectly match their businesses and accelerate their growth. ​ To get all the details, check out our blog post 👇 ​

Attio

26,821 görüntüleme • 2 yıl önce

Announcing #buildshit! Calling all interaction fanatics, designers and engineers for a fun and light interaction design challenge. The winner takes home $29. Challenge: Create a reveal interaction with two views: 1. The first view should showcase a photograph with the photographer's name and social handle. 2. The second view should present all the metadata and reveal itself through some interaction. Details: 1. Post your work with #buildshit to participate. Use the assets linked below. You may include additional metadata. 2. You have the complete freedom to design any layout and interaction as long as you have the two views and the required assets. 3. The post with the most likes wins (to keep things simple). 4. Tools do not matter. Participate with Code, Figma, Adobe, Jitter, Procreate, Spline, Rive or anything that you are comfortable with. 5. The submissions end on 1 September 2024 at 2:00 PM IST. 6. Do not take the challenge too seriously. This is all about having fun, exploring your creativity and learning from others. Assets: Why? I love thoughtful and delightful interactions. I believe there are always a lot of ways to approach a problem. I am interested in understanding how different people approach the same problem and learning from them. -- Participate for the fun of it, share it with others and let me know if there is something that you'd like to be done differently.
0:10

Announcing #buildshit! Calling all interaction fanatics, designers and engineers for a fun and light interaction design challenge. The winner takes home $29. Challenge: Create a reveal interaction with two views: 1. The first view should showcase a photograph with the photographer's name and social handle. 2. The second view should present all the metadata and reveal itself through some interaction. Details: 1. Post your work with #buildshit to participate. Use the assets linked below. You may include additional metadata. 2. You have the complete freedom to design any layout and interaction as long as you have the two views and the required assets. 3. The post with the most likes wins (to keep things simple). 4. Tools do not matter. Participate with Code, Figma, Adobe, Jitter, Procreate, Spline, Rive or anything that you are comfortable with. 5. The submissions end on 1 September 2024 at 2:00 PM IST. 6. Do not take the challenge too seriously. This is all about having fun, exploring your creativity and learning from others. Assets: Why? I love thoughtful and delightful interactions. I believe there are always a lot of ways to approach a problem. I am interested in understanding how different people approach the same problem and learning from them. -- Participate for the fun of it, share it with others and let me know if there is something that you'd like to be done differently.

Preet

41,517 görüntüleme • 1 yıl önce

How to scale your app past $20k/mo with AI UGC in literally 5 steps: 1. Connect Higgsfield MCP 2. create a character using nano banana pro 3. use the MCP + claude to produce seedance 2.0 videos using the start frame of your AI character 4. use postbridge to scheduele out videos to accounts 5. repeat across multiple accounts Congratulations you now own a team of 10 UGC creatorsFor 1/10th of the price and fully automated. I must have spoke to 5+ founders by now that have apps doing anywhere from $30k/mo to $100k/mo purely scaled with AI UGC I attached a case study of an account generating 14M+ views per month with an AI character in the fitness niche. This is the future of marketing. I give this 2 years before everyone finds out and competition sky rockets but right now, competition is virtually 0.01% if you are serious about winning, take 5 minutes to read this article:
0:12

How to scale your app past $20k/mo with AI UGC in literally 5 steps: 1. Connect Higgsfield MCP 2. create a character using nano banana pro 3. use the MCP + claude to produce seedance 2.0 videos using the start frame of your AI character 4. use postbridge to scheduele out videos to accounts 5. repeat across multiple accounts Congratulations you now own a team of 10 UGC creatorsFor 1/10th of the price and fully automated. I must have spoke to 5+ founders by now that have apps doing anywhere from $30k/mo to $100k/mo purely scaled with AI UGC I attached a case study of an account generating 14M+ views per month with an AI character in the fitness niche. This is the future of marketing. I give this 2 years before everyone finds out and competition sky rockets but right now, competition is virtually 0.01% if you are serious about winning, take 5 minutes to read this article:

Ernesto Lopez

41,007 görüntüleme • 2 ay önce

You can now create AI images directly from Google Slides. No need to spend hours searching for images for your presentations. And this feature is available for free. Here's how to activate it: 1. Go to labs .google .com 2. Scroll down to "Google Workspace". 3. Click on the "Learn more" button to access the waitlist. When it's activated, you'll see the button that appears in Google Slides as in the video. Click on it and enter your prompt: E.g.: "a cat in front of a raspberry pie". You can even choose different styles: photography, vector art, sketch, ... This will save a lot of time when creating slideshows! Don't hesitate to follow me to learn how to do more with AI.
0:12

You can now create AI images directly from Google Slides. No need to spend hours searching for images for your presentations. And this feature is available for free. Here's how to activate it: 1. Go to labs .google .com 2. Scroll down to "Google Workspace". 3. Click on the "Learn more" button to access the waitlist. When it's activated, you'll see the button that appears in Google Slides as in the video. Click on it and enter your prompt: E.g.: "a cat in front of a raspberry pie". You can even choose different styles: photography, vector art, sketch, ... This will save a lot of time when creating slideshows! Don't hesitate to follow me to learn how to do more with AI.

Paul Couvert

318,258 görüntüleme • 2 yıl önce