Загрузка видео...

Не удалось загрузить видео

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

How I create 3D-feel websites with expanding images using Claude Code👇 1. Use Claude to plan scroll-based animations + scene flow 2. Start with full-width images that expand on scroll 3. Add zoom-in + scale effects to create depth illusion 4. Layer images to simulate foreground/background (fake 3D) 5.... show more

FHILY👑

7,884 subscribers

10,229 просмотров • 2 месяцев назад •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

A GITHUB REPO WILL BUILD YOU A SCROLLABLE 3D WORLD FOR ANY BRAND Imagine describing your brand, then getting a cinematic 3D webpage where every scroll pushes the camera deeper into the next environment with perfectly smooth transitions, similar to the immersive storytelling used on Apple's product pages. This repository works as an AI agent skill for Claude Code and Codex. Give it your brand details along with the scenes you want, and it automatically creates the images, animated zoom sequences, and transition clips that blend every section together into one continuous experience.

Kshitij Mishra | AI & Tech

23,597 просмотров • 21 дней назад

Beginner video: How to install & use Grok Build (made for non-technical SuperGrok and X Premium+ users) I got so many questions from friends, so I made this simple step-by-step guide. You’ll see exactly how to: • Install Grok Build in seconds with one command • Create real websites • Use Grok Imagine to auto-generate images & videos • Run multiple projects at once in different folders Grok even runs commands for you. No coding experience needed. Watch the full walkthrough 👇

Beginner video: How to install & use Grok Build (made for non-technical SuperGrok and X Premium+ users) I got so many questions from friends, so I made this simple step-by-step guide. You’ll see exactly how to: • Install Grok Build in seconds with one command • Create real websites • Use Grok Imagine to auto-generate images & videos • Run multiple projects at once in different folders Grok even runs commands for you. No coding experience needed. Watch the full walkthrough 👇

Dan

63,220,703 просмотров • 2 месяцев назад

Cinematic city transitions. Perfect cuts. Zero traditional video editing. Everything you’re watching is AI. Tools: - Kling 2.5 Turbo - Nano Banana Pro - ChatGPT 4 STEP TUTORIAL: 1️⃣: Design your concept Brainstorm with ChatGPT the type of “vibe” you want your images/video to capture. I landed on “Cinematic Urban Melancholy” for my overall Visual Theme. 2️⃣: Generate Images with Nano Banana 🍌 Use ChatGPT to generate nano-banana-ready prompts for each of the 5 images in your setting. 3️⃣: Generate AI Transitions Navigate to Kling and select AI Video Generator Upload your start frame (image 1) + end frame (image 2) Prompt for a “seamless cinematic transition between scenes”. You’ll need to iterate on your prompt until the result matches your vision. Be specific about motion, style, and mood. 4️⃣: Polish Import everything into your editor (I use CapCut). Add speed / slowdown. And most importantly, add sound design. Music and SFX sell the visuals. Bookmark this and try it out yourself! If you want the exact prompts I'm using to generate these transitions: Follow, RT, & comment 'PROMPTS' below. I'll dm them to you (must be following so i can message)

Cinematic city transitions. Perfect cuts. Zero traditional video editing. Everything you’re watching is AI. Tools: - Kling 2.5 Turbo - Nano Banana Pro - ChatGPT 4 STEP TUTORIAL: 1️⃣: Design your concept Brainstorm with ChatGPT the type of “vibe” you want your images/video to capture. I landed on “Cinematic Urban Melancholy” for my overall Visual Theme. 2️⃣: Generate Images with Nano Banana 🍌 Use ChatGPT to generate nano-banana-ready prompts for each of the 5 images in your setting. 3️⃣: Generate AI Transitions Navigate to Kling and select AI Video Generator Upload your start frame (image 1) + end frame (image 2) Prompt for a “seamless cinematic transition between scenes”. You’ll need to iterate on your prompt until the result matches your vision. Be specific about motion, style, and mood. 4️⃣: Polish Import everything into your editor (I use CapCut). Add speed / slowdown. And most importantly, add sound design. Music and SFX sell the visuals. Bookmark this and try it out yourself! If you want the exact prompts I'm using to generate these transitions: Follow, RT, & comment 'PROMPTS' below. I'll dm them to you (must be following so i can message)

David Roberts

230,492 просмотров • 7 месяцев назад

This guy with no design background just built a 3D website that would have cost a client $8,000 at any agency. He didn't hire a developer. He didn't open Figma. He opened Claude and started typing what he wanted to see. 3D objects that move on scroll. Animations that follow the cursor. Cinematic transitions between sections. Claude generated the code. Emergent rendered it live. He adjusted with more prompts until the screen showed something he couldn't have built in 6 months of learning. The whole thing took one afternoon. What used to require a senior developer and a $15,000 budget now requires knowing how to describe what you want clearly. That's it. That's the only skill. Most people have Claude. Almost none of them know how to actually use it. This article below fixes that.

This guy with no design background just built a 3D website that would have cost a client $8,000 at any agency. He didn't hire a developer. He didn't open Figma. He opened Claude and started typing what he wanted to see. 3D objects that move on scroll. Animations that follow the cursor. Cinematic transitions between sections. Claude generated the code. Emergent rendered it live. He adjusted with more prompts until the screen showed something he couldn't have built in 6 months of learning. The whole thing took one afternoon. What used to require a senior developer and a $15,000 budget now requires knowing how to describe what you want clearly. That's it. That's the only skill. Most people have Claude. Almost none of them know how to actually use it. This article below fixes that.

Anatoli Kopadze

363,251 просмотров • 3 месяцев назад

How to install the ChainGPT AI skill for Claude Code so you can ship Web3 projects with ZERO coding experience. Setup takes about 3 minutes: 1. Install Claude Code at 2. Run /plugin install ChainGPT-org/chaingpt-claude-skill ( 3. Get a ChainGPT API key at: 4. Add credits at: 5. Type /chaingpt and describe what you want to build What I built: I asked for a cat-themed AI NFT generator. The skill knew which API endpoint to hit, how to handle the response, and how to display the image. If I can do this in under an hour with no coding background, so can you. Anyone can build with ChainGPT AI! Get your API key → Top up credits →

How to install the ChainGPT AI skill for Claude Code so you can ship Web3 projects with ZERO coding experience. Setup takes about 3 minutes: 1. Install Claude Code at 2. Run /plugin install ChainGPT-org/chaingpt-claude-skill ( 3. Get a ChainGPT API key at: 4. Add credits at: 5. Type /chaingpt and describe what you want to build What I built: I asked for a cat-themed AI NFT generator. The skill knew which API endpoint to hit, how to handle the response, and how to display the image. If I can do this in under an hour with no coding background, so can you. Anyone can build with ChainGPT AI! Get your API key → Top up credits →

ChainGPT

26,815 просмотров • 3 месяцев назад

DALL-E 3 Double Exposure Images Using ChatGPT's Custom Instructions. 🔖 Bookmark and Repost! If you find this useful, please share it with others! You can now easily create double exposure images by using the syntax Color::subject1::subject2 You can either input this directly into DALL-E 3 before generating images or incorporate it into your custom instructions. This command will automatically use the fixed prompt to generate 4 different images, each with a unique seed value. Paste this under ChatGPT's Custom Instructions or DALL-3 before starting conversation. { DE": { "Instruction": "Using will only use generic prompt and update place holder varaibles and nothing else' Genric Prompt: "Construct a [Color] double exposure image where [Subject #1] is intricately superimposed within the confines of [Subject #2], all set against a stark white background.' Create 4 images with different seeds without modifying the generic prompt." You will first create two images. Within the same request, you will generate two more without asking for any input from the user. In general, you will always create 4 images. Your response should be something like this: 'Here are the first two images along with their seed details.' You must always provide the seed number details for that image after it's rendered. Then 'I'll generate the next two images.' And finally 'Here are the remaining two images along with their seed details.' You will always use wide aspect ratio and You must always provide the seed number. When command is activated display full instruction and also confirm that you will only use genric prompt and nothing else and update only varaiable", "CommandFormat": "color::subject1::subject2", "Response": { "Initial": "Creating images based on the provided subjects...", "AfterFirstSet": "Here are the first two images along with their prompt and seed details.", "AfterSecondSet": "Here are the remaining two images along with their prompt and seed details." }, "ActivationCommand": "/activate DE" } } Example: To activate type: /activate DE Notes Start giving prompt like this blue::mountain::wolf red::city skyline::dancer green::forest::lion If you found this post helpful, don't forget to hit the like and follow buttons, and share it with others who might find it useful.

DALL-E 3 Double Exposure Images Using ChatGPT's Custom Instructions. 🔖 Bookmark and Repost! If you find this useful, please share it with others! You can now easily create double exposure images by using the syntax Color::subject1::subject2 You can either input this directly into DALL-E 3 before generating images or incorporate it into your custom instructions. This command will automatically use the fixed prompt to generate 4 different images, each with a unique seed value. Paste this under ChatGPT's Custom Instructions or DALL-3 before starting conversation. { DE": { "Instruction": "Using will only use generic prompt and update place holder varaibles and nothing else' Genric Prompt: "Construct a [Color] double exposure image where [Subject #1] is intricately superimposed within the confines of [Subject #2], all set against a stark white background.' Create 4 images with different seeds without modifying the generic prompt." You will first create two images. Within the same request, you will generate two more without asking for any input from the user. In general, you will always create 4 images. Your response should be something like this: 'Here are the first two images along with their seed details.' You must always provide the seed number details for that image after it's rendered. Then 'I'll generate the next two images.' And finally 'Here are the remaining two images along with their seed details.' You will always use wide aspect ratio and You must always provide the seed number. When command is activated display full instruction and also confirm that you will only use genric prompt and nothing else and update only varaiable", "CommandFormat": "color::subject1::subject2", "Response": { "Initial": "Creating images based on the provided subjects...", "AfterFirstSet": "Here are the first two images along with their prompt and seed details.", "AfterSecondSet": "Here are the remaining two images along with their prompt and seed details." }, "ActivationCommand": "/activate DE" } } Example: To activate type: /activate DE Notes Start giving prompt like this blue::mountain::wolf red::city skyline::dancer green::forest::lion If you found this post helpful, don't forget to hit the like and follow buttons, and share it with others who might find it useful.

AshutoshShrivastava

34,305 просмотров • 2 лет назад

Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.

Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.

Axel Bitblaze 🪓

31,250 просмотров • 4 месяцев назад

how to use claude code + outscraper + crawl4ai to build a profitable online directory in 4 days for under $250 1. scrape 50k–70k raw records with outscraper 2. use claude code to clean, dedupe, and structure the data in passes 3. run crawl4ai to verify live sites and filter junk automatically 4. then enrich one layer at a time: inventory, pricing, images (claude vision), amenities, service areas “BuT aN oNlInE DiRecTorY isn’t a ReAl bUsiNesS” first it’s traffic + leads. then it’s premium listings. then it’s vertical saas (crm, quoting tools, booking). then it’s agents handling intake, routing, follow-ups. then it’s the transaction layer. episode is available on The Startup Ideas Podcast (SIP) 🧃 you start with organized data and you end with owning the workflow directories are kinda like a trojan horse. watch

how to use claude code + outscraper + crawl4ai to build a profitable online directory in 4 days for under $250 1. scrape 50k–70k raw records with outscraper 2. use claude code to clean, dedupe, and structure the data in passes 3. run crawl4ai to verify live sites and filter junk automatically 4. then enrich one layer at a time: inventory, pricing, images (claude vision), amenities, service areas “BuT aN oNlInE DiRecTorY isn’t a ReAl bUsiNesS” first it’s traffic + leads. then it’s premium listings. then it’s vertical saas (crm, quoting tools, booking). then it’s agents handling intake, routing, follow-ups. then it’s the transaction layer. episode is available on The Startup Ideas Podcast (SIP) 🧃 you start with organized data and you end with owning the workflow directories are kinda like a trojan horse. watch

GREG ISENBERG

122,205 просмотров • 5 месяцев назад

You can build your own custom Jarvis, using Cursor, Claude Code or Codex, in less than 20 minutes. Using the new GPT-Realtime-2 API... Anything you can do on a computer can be turned into a tool that your Jarvis can use. (Here's exactly how to do it) Introduction Step 1: Cursor Setup Step 2 – Full Jarvis Prompt Step 3 – My Agent Ricky Step 4 – Second Prompt Step 5 – Add EXA API Key for Web Search Step 6 – Third Prompt Step 7 – Add Computer Use Mode Step 8 – Add AI Image Generator (Insane) Final Demo

You can build your own custom Jarvis, using Cursor, Claude Code or Codex, in less than 20 minutes. Using the new GPT-Realtime-2 API... Anything you can do on a computer can be turned into a tool that your Jarvis can use. (Here's exactly how to do it) Introduction Step 1: Cursor Setup Step 2 – Full Jarvis Prompt Step 3 – My Agent Ricky Step 4 – Second Prompt Step 5 – Add EXA API Key for Web Search Step 6 – Third Prompt Step 7 – Add Computer Use Mode Step 8 – Add AI Image Generator (Insane) Final Demo

Riley Brown

62,062 просмотров • 1 месяц назад

I FINALLY managed to create a point cloud animation 💪 Here is how I did it using #GaussianSplatting, #Blender and 2 add-ons from KIRI Engine - 3D Scanner App . Creating point cloud animations has always been a dream of mine (inspired by masters like ), but the tech to create the point clouds and visual effects was always a huge barrier. Then I discovered these 2 Blender add-ons from Kiri engine after I had a chat with Jack Wang in my podcast, and it changed everything: 1- Create a splat with any tool or app you want 2- Install the free "Point Animate" add-on in Blender 3- Drag the 2 .ply you want to morph from --> to 4- Set source and destination in the add-on side panel At this point you could play around with various settings like noise scatter, noise intensity, wind and more. If you want to combine with the splat as well you can get also the 3DGS render to add cool dissolving effects, fancy lighting and really get the most out of your scans. If you end up using it please tag me. I am curious to see what much more skilled people than me can put together 😉

I FINALLY managed to create a point cloud animation 💪 Here is how I did it using #GaussianSplatting, #Blender and 2 add-ons from KIRI Engine - 3D Scanner App . Creating point cloud animations has always been a dream of mine (inspired by masters like ), but the tech to create the point clouds and visual effects was always a huge barrier. Then I discovered these 2 Blender add-ons from Kiri engine after I had a chat with Jack Wang in my podcast, and it changed everything: 1- Create a splat with any tool or app you want 2- Install the free "Point Animate" add-on in Blender 3- Drag the 2 .ply you want to morph from --> to 4- Set source and destination in the add-on side panel At this point you could play around with various settings like noise scatter, noise intensity, wind and more. If you want to combine with the splat as well you can get also the 3DGS render to add cool dissolving effects, fancy lighting and really get the most out of your scans. If you end up using it please tag me. I am curious to see what much more skilled people than me can put together 😉

Gabriele Romagnoli

10,392 просмотров • 1 год назад

🎓Learn how to create a powerful Torn Fabric smart material in a matter of seconds in my latest video series (AAA) Pro Tips! This smart material can be used on virtually any 3D asset. ____________________________________________________ In this video, the steps are as follows: 1. Create a base fill layer containing no information. We will use this layer to call out the core effects. Add a black mask to this layer and inside that mask add a paint layer and draw a simple pill shape. 2. Next, add a blur directional and be sure the direction is the same direction that your fabric is flowing to. 3. Add a UV border generator set to subtract to mask out any uv seams followed by an anchorpoint. Additionally, add a messy Fibers 3 fill layer set to overlay. 4. Use a levels to adjust the mask along with a sharpen filter. A warp filter should also be added to introduce some randomness. Add an anchor point at the top of the mask as well. 5. Create another fill layer with its opacity channel set to black and apply a black mask to the fill layer. Inside its mask retrieve the anchorpoint information from the previous fill layer. 6. Create an additional fill layer with a bright diffuse color along with a black mask applied to it. Add the anchorpoint information from the previous mask into its mask as well and this should give us some white fibers on the edges. Now we have a torn fabric effect wherever we paint using the paint layer created inside the callout mask! ____________________________________________________ More AAA Game Dev Tips can be found on my YouTube channel here: Stay tuned for more weekly Tips! Happy Texturing!💚 #gamedev #gameart #tutorial #3dmodeling #hardsurface #texturing

🎓Learn how to create a powerful Torn Fabric smart material in a matter of seconds in my latest video series (AAA) Pro Tips! This smart material can be used on virtually any 3D asset. In this video, the steps are as follows: 1. Create a base fill layer containing no information. We will use this layer to call out the core effects. Add a black mask to this layer and inside that mask add a paint layer and draw a simple pill shape. 2. Next, add a blur directional and be sure the direction is the same direction that your fabric is flowing to. 3. Add a UV border generator set to subtract to mask out any uv seams followed by an anchorpoint. Additionally, add a messy Fibers 3 fill layer set to overlay. 4. Use a levels to adjust the mask along with a sharpen filter. A warp filter should also be added to introduce some randomness. Add an anchor point at the top of the mask as well. 5. Create another fill layer with its opacity channel set to black and apply a black mask to the fill layer. Inside its mask retrieve the anchorpoint information from the previous fill layer. 6. Create an additional fill layer with a bright diffuse color along with a black mask applied to it. Add the anchorpoint information from the previous mask into its mask as well and this should give us some white fibers on the edges. Now we have a torn fabric effect wherever we paint using the paint layer created inside the callout mask! More AAA Game Dev Tips can be found on my YouTube channel here: Stay tuned for more weekly Tips! Happy Texturing!💚 #gamedev #gameart #tutorial #3dmodeling #hardsurface #texturing

Cohen Brawley

78,811 просмотров • 2 лет назад

THE 64 MINUTE OPENAI CODEX MASTERCLASS IS HERE if you've been meaning to learn Codex, this is the episode for you, we cover: 1/ Claude vs Codex (what's better?) 2/How to run Claude Code inside Codex (really cool) 3/Why GPT 5.5 changed everything for browser agents 4/How to create skills (reusable agents you build once and call by name forever) 5/How to connect Notion with surgical permissions (one database, not the whole workspace) 6/How to use Remotion inside Codex to create videos 7/ How to one-shot full mobile apps in Swift 8/The 4 projects to run on day one to get up to speed fast shoutout to Riley Brown for coming onto The Startup Ideas Podcast (SIP) 🧃 for the 5th time. every episode he delivers. this one is the Codex masterclass. if you've been meaning to learn Codex, this is the episode. 100% free i just want to see you build your ideas. watch

THE 64 MINUTE OPENAI CODEX MASTERCLASS IS HERE if you've been meaning to learn Codex, this is the episode for you, we cover: 1/ Claude vs Codex (what's better?) 2/How to run Claude Code inside Codex (really cool) 3/Why GPT 5.5 changed everything for browser agents 4/How to create skills (reusable agents you build once and call by name forever) 5/How to connect Notion with surgical permissions (one database, not the whole workspace) 6/How to use Remotion inside Codex to create videos 7/ How to one-shot full mobile apps in Swift 8/The 4 projects to run on day one to get up to speed fast shoutout to Riley Brown for coming onto The Startup Ideas Podcast (SIP) 🧃 for the 5th time. every episode he delivers. this one is the Codex masterclass. if you've been meaning to learn Codex, this is the episode. 100% free i just want to see you build your ideas. watch

GREG ISENBERG

199,366 просмотров • 3 месяцев назад

I'm thrilled to announce the definitive course on Claude Code, created with Anthropic and taught by Elie Schoppik Elie Schoppik. If you want to use highly agentic coding - where AI works autonomously for many minutes or longer, not just completing code snippets - this is it. Claude Code has been a game-changer for many developers (including me!), but there's real depth to using it well. This comprehensive course covers everything from fundamentals to advanced patterns. After this short course, you'll be able to: - Orchestrate multiple Claude subagents to work on different parts of your codebase simultaneously - Tag Claude in GitHub issues and have it autonomously create, review, and merge pull requests - Transform messy Jupyter notebooks into clean, production-ready dashboards - Use MCP tools like Playwright so Claude can see what's wrong with your UI and fix it autonomously Whether you're new to Claude Code or already using it, you'll discover powerful capabilities that can fundamentally change how you build software. I'm very excited about what agentic coding lets everyone now do. Please take this course!

I'm thrilled to announce the definitive course on Claude Code, created with Anthropic and taught by Elie Schoppik Elie Schoppik. If you want to use highly agentic coding - where AI works autonomously for many minutes or longer, not just completing code snippets - this is it. Claude Code has been a game-changer for many developers (including me!), but there's real depth to using it well. This comprehensive course covers everything from fundamentals to advanced patterns. After this short course, you'll be able to: - Orchestrate multiple Claude subagents to work on different parts of your codebase simultaneously - Tag Claude in GitHub issues and have it autonomously create, review, and merge pull requests - Transform messy Jupyter notebooks into clean, production-ready dashboards - Use MCP tools like Playwright so Claude can see what's wrong with your UI and fix it autonomously Whether you're new to Claude Code or already using it, you'll discover powerful capabilities that can fundamentally change how you build software. I'm very excited about what agentic coding lets everyone now do. Please take this course!

Andrew Ng

1,649,369 просмотров • 1 год назад

I genuinely don't understand why everyone isn't using this yet. Andrej Karpathy, OpenAI co-founder, posted a simple idea that went massively viral: Stop using AI to write code. Use it to build a second brain. You point Claude Code at a folder. Drop in any source: an article, a transcript, a PDF. Claude reads it, links it, files it into a living wiki of everything you know. It compounds like interest. The more you feed it, the smarter it gets. Here's the whole thing: 1) Install Obsidian 2) Create a vault 3) Open it in Claude Code 4) Paste Karpathy's wiki idea and tell Claude to build it 5) Claude makes three folders: - raw (for sources) - wiki (for its pages) - CLAUDE. md (that runs it) 6) Drop any source into raw and say: "ingest this" 7) Ask questions across everything, forever Five minutes to set up and you never start from a blank chat again. Full step by step guide below.

I genuinely don't understand why everyone isn't using this yet. Andrej Karpathy, OpenAI co-founder, posted a simple idea that went massively viral: Stop using AI to write code. Use it to build a second brain. You point Claude Code at a folder. Drop in any source: an article, a transcript, a PDF. Claude reads it, links it, files it into a living wiki of everything you know. It compounds like interest. The more you feed it, the smarter it gets. Here's the whole thing: 1) Install Obsidian 2) Create a vault 3) Open it in Claude Code 4) Paste Karpathy's wiki idea and tell Claude to build it 5) Claude makes three folders: - raw (for sources) - wiki (for its pages) - CLAUDE. md (that runs it) 6) Drop any source into raw and say: "ingest this" 7) Ask questions across everything, forever Five minutes to set up and you never start from a blank chat again. Full step by step guide below.

CyrilXBT

322,126 просмотров • 1 месяц назад

This is crazy... Just discovered Genspark - the Chinese super agent that CRUSHES Manus in every benchmark test! Created a full SEO agency website with my team's real images and testimonials in just 15 minutes... FOR FREE! 🤯 👇 Top 5 things about GenSpark: 1. Free plan with 200 credits daily (vs Manus $9/mo) 2. Creates videos, websites, presentations instantly 3. Makes ACTUAL phone calls for you (scary powerful) 4. Pulls real data for research reports 5. Supports 9 different LLM models vs Manus' 2 Save this video for when everyone's scrambling to get access. GenSpark will be the next AI tool to explode in popularity. Want the SOP? DM me.

This is crazy... Just discovered Genspark - the Chinese super agent that CRUSHES Manus in every benchmark test! Created a full SEO agency website with my team's real images and testimonials in just 15 minutes... FOR FREE! 🤯 👇 Top 5 things about GenSpark: 1. Free plan with 200 credits daily (vs Manus $9/mo) 2. Creates videos, websites, presentations instantly 3. Makes ACTUAL phone calls for you (scary powerful) 4. Pulls real data for research reports 5. Supports 9 different LLM models vs Manus' 2 Save this video for when everyone's scrambling to get access. GenSpark will be the next AI tool to explode in popularity. Want the SOP? DM me.

Julian Goldie SEO

33,423 просмотров • 1 год назад

I made tons of money building websites for people and small companies. Most of that is now gone. You can now generate, customize, and deploy a website using natural language. I recorded myself building a site from scratch using 10Web.io. 4 minutes later, I had a full website generated just for me. Crazy! That's mostly how I paid rent when I graduated college: I'd either build you a new site or make changes to an existing one. It's nuts anyone can do that today by just asking. But this doesn't stop with generating a website. 10Web also released an AI Copilot that you can use to edit a website with a chat-based AI assistant. Here is what you can do with the AI Copilot: 1. You can edit individual elements and widgets on your site by selecting them and describing the changes you want. 2. You can generate new images, create sections, and generate or edit text. 3. You can also add any new elements to the site. The best way to understand how much progress we've made is by looking at the AI Copilot in action: And the funny part is that we are just figuring out how to use AI models. 2025 will be crazy.

I made tons of money building websites for people and small companies. Most of that is now gone. You can now generate, customize, and deploy a website using natural language. I recorded myself building a site from scratch using 10Web.io. 4 minutes later, I had a full website generated just for me. Crazy! That's mostly how I paid rent when I graduated college: I'd either build you a new site or make changes to an existing one. It's nuts anyone can do that today by just asking. But this doesn't stop with generating a website. 10Web also released an AI Copilot that you can use to edit a website with a chat-based AI assistant. Here is what you can do with the AI Copilot: 1. You can edit individual elements and widgets on your site by selecting them and describing the changes you want. 2. You can generate new images, create sections, and generate or edit text. 3. You can also add any new elements to the site. The best way to understand how much progress we've made is by looking at the AI Copilot in action: And the funny part is that we are just figuring out how to use AI models. 2025 will be crazy.

Santiago

57,917 просмотров • 1 год назад

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Gemini 3 is the best model at creating animations. It's not even close. Here are the prompts I used for creating these UI animations. You don't need animations everywhere, but there are key places where it can enhance your design: the hero intro, hover interactions, slow content reveal, background effects and navigation transitions. Gemini 3 relies heavily on good prompting, ideally with image or code. Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover. " Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask" Content switching: "Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards." Flashlight on hover: "Add a subtle flashlight effect on hover/mouse position to both background and border of the cards." Testimonials looping: "Make the cards animate marquis in an infinite loop with alpha mask slowly."

Meng To

199,899 просмотров • 8 месяцев назад

There is a strategy for Claude Max users that will 3-5X productivity and vibe coding learning curve. Which most vibe coders don't utilize! Most people using Claude Code just sit and watch the terminal while their prompt cooks. That’s dead time. If you’re on Claude Max, you’re paying for parallel capacity you’re probably not using fully. And tokens get wasted. Here’s a methodology to fix that and boost the way you use Claude forever: The Setup & Workflow 1. Add the repos you’re actively working on to your workspace from your IDE 2. Click “new terminal” and open 3-4 terminal instances, each pointed at a different project 3. Toggle between them on the right side of your terminal panel 4. When one terminal is cooking a prompt, look at the others 5. Use the time Claude is working to prompt the next project 6. Continuously rotate and ship across 3-4 projects like this 7. Use your tokens effectively, build more, learn faster The Result You ship 3-4 projects simultaneously. You burn through your token allocation on actual output instead of letting it sit unused. You learn faster because you’re getting more reps in the same amount of time, too. As long as you work on different projects at the same time like this, it will only be a boost in productivity, with no chance for code to get spaghetti. In the video, you can see where to find add workspace, run new terminal, and change between terminals:

There is a strategy for Claude Max users that will 3-5X productivity and vibe coding learning curve. Which most vibe coders don't utilize! Most people using Claude Code just sit and watch the terminal while their prompt cooks. That’s dead time. If you’re on Claude Max, you’re paying for parallel capacity you’re probably not using fully. And tokens get wasted. Here’s a methodology to fix that and boost the way you use Claude forever: The Setup & Workflow 1. Add the repos you’re actively working on to your workspace from your IDE 2. Click “new terminal” and open 3-4 terminal instances, each pointed at a different project 3. Toggle between them on the right side of your terminal panel 4. When one terminal is cooking a prompt, look at the others 5. Use the time Claude is working to prompt the next project 6. Continuously rotate and ship across 3-4 projects like this 7. Use your tokens effectively, build more, learn faster The Result You ship 3-4 projects simultaneously. You burn through your token allocation on actual output instead of letting it sit unused. You learn faster because you’re getting more reps in the same amount of time, too. As long as you work on different projects at the same time like this, it will only be a boost in productivity, with no chance for code to get spaghetti. In the video, you can see where to find add workspace, run new terminal, and change between terminals:

Meta Alchemist

82,000 просмотров • 6 месяцев назад

How to build a brand from scratch using Paper, Codex + GPT image model 2 Since two weeks back, I´ve done most of my design work in paper And I´m genuinely impressed by what you can do with their MCP Combined with claude & codex you can pretty much build out a brand in an hour or two 1. Brainstorm a name for you product or service 2. find a good design system you can iterate on or come up with one from scratch 3. create a moodboard of things you like and want the brand to be about (images, colors, shapes, elements, you name it) inside paper 4. select the moodboard and prompt codex to create a brand brief (hooked up to paper mcp) to create the inital brand book in code 5. Use the new brand book you created and copy as PNG, take that image into ChatGPT and use GPT model 2 (with the brand prompt) to create the brand book 6. You will get a finished and well-done 10 paged brand book Now you can use that to create anything in line with the brand: Landing pags, lead magnets, ads, anything you can think of Comment "bookmarkable" + RT and I´ll send you the brand prompt and step by step guide in DMs.

Shann³

14,157 просмотров • 2 месяцев назад

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images */ section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) * 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

CSS Tip! ✨ You can create these parallax effects and image cross-fades with scroll-driven animations 🤙 img { animation: fade; animation-timeline: view(); mix-blend-mode: plus-lighter } img:last-of-type { animation-direction: reverse; } @keyframes fade { to { opacity: 0; }} This one's fun! 😁 The trick with the cross-fading image is to make use of one animation that runs at the same time on two images inside a container. You use the same animation, animation-timeline, and animation-range. But, you use animation-direction: reverse on one of the images so they go in the opposite direction 🫶 The use of mix-blend-mode: plus-lighter; produces a better cross-fade result 💯 A viewTimeline (view()) works because you know that both images are the same height. The range you can use is img { animation-timeline: view(); animation-range: cover 45% cover 55%; } That means when the image has covered 45% of the scrollport (In this case, the window), start the animation. And finish when it has covered 55% 🎬 How about the slight parallax? This is a trick with calc(). You know the top of the small image and the big image line up. And you can do this by absolutely placing the caption outside of the small image. The trick is to translate the small image by a distance so it lines up with the bottom of the big image. You can do that like this :root { --catch-up: calc( var(--big-height) - var(--small-height) ); } @keyframes move { to { translate: 0 var(--catch-up); }} Then drive that animation with a scroll-driven animation using the container of both images as the driver 🤙 /* section contains both images / section { view-timeline: --container; } .img-fader { animation: catch-up both linear; animation-timeline: --container; animation-range: 50vh calc(100vh + (var(--big-height) 0.25)); } That's it! Scroll-driven image cross-fading and parallax effects without any JavaScript. This demo will work in all browsers as there is some JavaScript in place where the API isn't supported 🤙 To do that, it uses GSAP ScrollTrigger 🏆 As always, any questions, requests, etc. hit me up! 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

242,205 просмотров • 2 лет назад