正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

用 GPT-5 Thinking 做了天气卡片的经典测试，只能说拉中之拉，这都啥啊 Prompt：Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining... show more

-Zho-

20,525 subscribers

20,344 次观看 • 1 年前 •via X (Twitter)

科学技术教育艺术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

1. Build complete websites / apps Here's the prompt I used: "Name Your Applet: Describe What Your App Does: You are an expert full-stack web developer specializing in JavaScript and CSS/HTML applet development and design. Your task is to develop expert-level code for this project. Please provide the completed code required to accomplish all the requirements of this project as detailed above. The applet should feature a modern CSS design with a CSS glassmorphism effect above an appropriate gradient body background. Use flex-direction: column unless your app needs a different layout. Include an h1 title tag above the app container. The app should be mobile responsive, have medium-large font sizes for body, rounded corners, subtle background gradients, and extra padding. The app should be centered on the page. Add a centered copyright ''©2025 {Applet Name}'' below the app container. Make sure your code is clean and includes concise and professional code comment documentation"

1. Build complete websites / apps Here's the prompt I used: "Name Your Applet: Describe What Your App Does: You are an expert full-stack web developer specializing in JavaScript and CSS/HTML applet development and design. Your task is to develop expert-level code for this project. Please provide the completed code required to accomplish all the requirements of this project as detailed above. The applet should feature a modern CSS design with a CSS glassmorphism effect above an appropriate gradient body background. Use flex-direction: column unless your app needs a different layout. Include an h1 title tag above the app container. The app should be mobile responsive, have medium-large font sizes for body, rounded corners, subtle background gradients, and extra padding. The app should be centered on the page. Add a centered copyright ''©2025 {Applet Name}'' below the app container. Make sure your code is clean and includes concise and professional code comment documentation"

God of Prompt

82,466 次观看 • 1 年前

Gemini 2.5 Flash demolishes my Galton Board test, I could not get 4omini, 4o mini high, or 03 to produce this. I found that Gemini 2.5 Flash understands my intents almost instantly, code produced is tight and neat. The prompt is a merging of various steps. It took me 5 steps to achieve this in Gemini 2.5 Flash, I gave up on OpenAI models after about half an hour. My iterations are obviously not exact. But people can test with this one prompt for more objective comparison. Please try this prompt on your end to confirm: -------------------------------------------------- Create a self-contained HTML file for a Galton board simulation using client-side JavaScript and a 2D physics engine (like Matter.js, included via CDN). The simulation should be rendered on an HTML5 canvas and meet the following criteria: 1. **Single File:** All necessary HTML, CSS, and JavaScript code must be within this single `.html` file. 2. **Canvas Size:** The overall simulation area (canvas) should be reasonably sized to fit on a standard screen without requiring extensive scrolling or zooming (e.g., around 500x700 pixels). 3. **Physics:** Utilize a 2D rigid body physics engine for realistic ball-peg and ball-wall interactions. 4. **Obstacles (Pegs):** Create static, circular pegs arranged in full-width horizontal rows extending across the usable width of the board (not just a triangle). The pegs should be small enough and spaced appropriately for balls to navigate and bounce between them. 5. **Containment:** * Include static, sufficiently thick side walls and a ground at the bottom to contain the balls within the board. * Implement *physical* static dividers between the collection bins at the bottom. These dividers must be thick enough to prevent balls from passing through them, ensuring accurate accumulation in each bin. 6. **Ball Dropping:** Balls should be dropped from a controlled, narrow area near the horizontal center at the top of the board to ensure they enter the peg field consistently. 7. **Bins:** The collection area at the bottom should be divided into distinct bins by the physical dividers. The height of the bins should be sufficient to clearly visualize the accumulation of balls. 8. **Visualization:** Use a high-contrast color scheme to clearly distinguish between elements. Specifically, use yellow for the structural elements (walls, top guides, physical bin dividers, ground), a contrasting color (like red) for the pegs, and a highly contrasting color (like dark grey or black) for the balls. 9. **Demonstration:** The simulation should visually demonstrate the formation of the normal (or binomial) distribution as multiple balls fall through the pegs and collect in the bins. Ensure the physics parameters (restitution, friction, density) and ball drop rate are tuned for a smooth and clear demonstration of the distribution. #OpenAI Sam Altman Greg Brockman AshutoshShrivastava Aidan McLaughlin

Gemini 2.5 Flash demolishes my Galton Board test, I could not get 4omini, 4o mini high, or 03 to produce this. I found that Gemini 2.5 Flash understands my intents almost instantly, code produced is tight and neat. The prompt is a merging of various steps. It took me 5 steps to achieve this in Gemini 2.5 Flash, I gave up on OpenAI models after about half an hour. My iterations are obviously not exact. But people can test with this one prompt for more objective comparison. Please try this prompt on your end to confirm: -------------------------------------------------- Create a self-contained HTML file for a Galton board simulation using client-side JavaScript and a 2D physics engine (like Matter.js, included via CDN). The simulation should be rendered on an HTML5 canvas and meet the following criteria: 1. Single File: All necessary HTML, CSS, and JavaScript code must be within this single `.html` file. 2. Canvas Size: The overall simulation area (canvas) should be reasonably sized to fit on a standard screen without requiring extensive scrolling or zooming (e.g., around 500x700 pixels). 3. Physics: Utilize a 2D rigid body physics engine for realistic ball-peg and ball-wall interactions. 4. Obstacles (Pegs): Create static, circular pegs arranged in full-width horizontal rows extending across the usable width of the board (not just a triangle). The pegs should be small enough and spaced appropriately for balls to navigate and bounce between them. 5. Containment: * Include static, sufficiently thick side walls and a ground at the bottom to contain the balls within the board. * Implement physical static dividers between the collection bins at the bottom. These dividers must be thick enough to prevent balls from passing through them, ensuring accurate accumulation in each bin. 6. Ball Dropping: Balls should be dropped from a controlled, narrow area near the horizontal center at the top of the board to ensure they enter the peg field consistently. 7. Bins: The collection area at the bottom should be divided into distinct bins by the physical dividers. The height of the bins should be sufficient to clearly visualize the accumulation of balls. 8. Visualization: Use a high-contrast color scheme to clearly distinguish between elements. Specifically, use yellow for the structural elements (walls, top guides, physical bin dividers, ground), a contrasting color (like red) for the pegs, and a highly contrasting color (like dark grey or black) for the balls. 9. Demonstration: The simulation should visually demonstrate the formation of the normal (or binomial) distribution as multiple balls fall through the pegs and collect in the bins. Ensure the physics parameters (restitution, friction, density) and ball drop rate are tuned for a smooth and clear demonstration of the distribution. #OpenAI Sam Altman Greg Brockman AshutoshShrivastava Aidan McLaughlin

RameshR

247,923 次观看 • 1 年前

Create a digital watch using HTML, CSS, and JavaScript. Check✅ my breakdown of its functionality⬇️ •Features: 1. HTML Structure: - A `div` with `id="watch"` acts as the display area for the digital clock. 2. CSS Styling: - Centering: The `body` uses `flexbox` to center the watch both vertically and horizontally. - Aesthetic Design: The watch has a rounded border, a specific background color, and text styling for a modern look. 3. JavaScript Functionality: - The `updateWatch` function gets the current time using the `Date` object, formats the hours, minutes, and seconds with leading zeros (using `padStart`), and updates the `#watch` div's content. - The `setInterval` method ensures the time updates every second. - An initial call to `updateWatch()` ensures the clock doesn't show `00:00:00` for the first second. • How It Works: - When the page loads, the time is immediately displayed and updates every second. This results in a real-time clock that's accurate and visually appealing. • Potential Enhancements: 1. Add a toggle between 12-hour and 24-hour format. 2. Include the date along with the time. 3. Animate or style the time updates for a smoother experience. Remember to repost this💪 to educate others on your timeline. Don't be selfish, share. Follow me Dhanian 🗯️ and turn on notifications🤛 for more tech updates For more tech projects, check link on my profile. Remember to bookmark💪 Here's the full code snippets for the sample ⌚watch ⬇️

Dhanian 🗯️

11,136 次观看 • 1 年前

$CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇$

CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

1,180,047 次观看 • 2 年前

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

CSS Tip! 🚥 You can create these trending expanding scroll indicators with scroll-driven animations and flex 🤙 .indicator { animation: grow; animation-range: contain calc(50% - var(--size)...; animation-timeline: var(--card); } @keyframes grow { 50% { flex: 3; }} What's the trick? Put the indicators in a container using flex layout and set a width larger than the number of indicators 😉 .indicators { aspect-ratio: 7 / 1; display: flex; } Importantly, set no gap 🤏 To mimic the gap set a transparent border on each indicator and set the background using padding-box .indicator { background: linear-gradient(#fff, #fff) padding-box; border-radius: 50px; border: 4px solid transparent; } Now for the animation. You want to create a view-timeline for each card that moves across 🤙 li:nth-of-type(1) { view-timeline: --one inline; } li:nth-of-type(2) { view-timeline: --two inline; } Make sure they use the inline axis too! The trick is hoisting these view-timeline so the indicators can use them with timeline-scope 👀 .track { timeline-scope: --one, --two, ...; } All that's left is for you to create the animation piece using some calc with the card size ⚡️ .indicator { --size: calc(var(--card-width) * 0.9); animation: grow both linear; animation-range: contain calc(50% - var(--size)) contain calc(50% + var(--size)); } .indicator:nth-of-type(1) { animation-timeline: --one; } .indicator:nth-of-type(2) { animation-timeline: --two; } @keyframes grow { 50% { flex: 3; }} And there you have it, responsive scroll indicators using CSS scroll-driven animations 😎 Sprinkle a little JavaScript to make them clickable and scroll the the right card ✨ const shift = (event) => { if (event.target.tagName === "BUTTON") { const index = [...event.target.parentNode.children].indexOf(event.target); const item = document.querySelector(`li:nth-of-type(${index + 1})`); item.scrollIntoView({ behavior: "smooth", inline: "center" }); } }; As always, any questions or suggestions, let me know. I've put a JavaScript fallback in to use GSAP in browsers that don't have scroll-driven animations 🫶 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

575,599 次观看 • 2 年前

🔥Sakana Fugu-ultra 🟩OpenAI GPT 5.5 🟩GLM 5.2 🟩Opus 4.8 TASK Create a high-quality single HTML file simulation of a Rube Goldberg / chain-reaction machine. The simulation should run automatically from start to finish without user input.The goal is to demonstrate whether the coding model understands real-world physics well enough to create believable cause-and-effect behavior - Rube Goldberg / chain-reaction machine. The scene should show a small physical world where objects interact through realistic mechanics: gravity, collisions, momentum transfer, ramps, pulleys, levers, springs, falling objects, rolling balls, dominoes, and water or particles if possible. The simulation should include: * A ball rolling down a ramp * Dominoes falling one after another * A lever or seesaw transferring force * A spring launcher * A pendulum or swinging weight * A pulley or elevator mechanism * Falling objects affected by gravity * Objects with different mass, friction, and bounce * Clear visual labels explaining what physical law is being demonstrated * A progress timeline showing the current stage of the chain reaction * Automatic reset/replay after the sequence ends The simulation should visually demonstrate: * Gravity * Momentum transfer * Conservation of energy * Friction * Torque * Elastic potential energy * Collision response * Cause and effect The model should not just animate objects on fixed paths. Objects should appear to interact physically. For example, the ball should knock over dominoes, dominoes should push a lever, the lever should launch another object, and so on. Evaluation criteria 1. Does the simulation run automatically without user input? 2. Do objects interact through believable physical cause and effect? 3. Are physical laws represented correctly? 4. Are labels and UI helpful? 5. Is the animation smooth and stable? 6. Does the code avoid fake-looking hardcoded movement? 7. Does the scene reset cleanly?

🔥Sakana Fugu-ultra 🟩OpenAI GPT 5.5 🟩GLM 5.2 🟩Opus 4.8 TASK Create a high-quality single HTML file simulation of a Rube Goldberg / chain-reaction machine. The simulation should run automatically from start to finish without user input.The goal is to demonstrate whether the coding model understands real-world physics well enough to create believable cause-and-effect behavior - Rube Goldberg / chain-reaction machine. The scene should show a small physical world where objects interact through realistic mechanics: gravity, collisions, momentum transfer, ramps, pulleys, levers, springs, falling objects, rolling balls, dominoes, and water or particles if possible. The simulation should include: * A ball rolling down a ramp * Dominoes falling one after another * A lever or seesaw transferring force * A spring launcher * A pendulum or swinging weight * A pulley or elevator mechanism * Falling objects affected by gravity * Objects with different mass, friction, and bounce * Clear visual labels explaining what physical law is being demonstrated * A progress timeline showing the current stage of the chain reaction * Automatic reset/replay after the sequence ends The simulation should visually demonstrate: * Gravity * Momentum transfer * Conservation of energy * Friction * Torque * Elastic potential energy * Collision response * Cause and effect The model should not just animate objects on fixed paths. Objects should appear to interact physically. For example, the ball should knock over dominoes, dominoes should push a lever, the lever should launch another object, and so on. Evaluation criteria 1. Does the simulation run automatically without user input? 2. Do objects interact through believable physical cause and effect? 3. Are physical laws represented correctly? 4. Are labels and UI helpful? 5. Is the animation smooth and stable? 6. Does the code avoid fake-looking hardcoded movement? 7. Does the scene reset cleanly?

Remek Kinas

13,410 次观看 • 1 个月前

👀 I used OpenAI's Code Interpreter to make Flappy Bird 🐦in 7 minutes: Code Interpreter/GPT-4 for code generation. Pre-existing or AI-generated assets for graphics. --- Here's how to make the game in only 6 steps: (1): Enter the following prompt: "write p5.js code for Flappy Bird where you control a yellow bird continuously flying between a series of green pipes. The bird flaps every time you left click the mouse. If the bird falls to the ground or hits a pipe, you lose. This game goes on infinitely until you lose and you get points the further you go". (2): Use generative AI or existing game assets and spirits. I searched "flappy bird assets" on Google and used the first link, a GitHub repo with pngs from the original Flappy Bird. (3): Use this prompt to link assets to the code: "Please generate the entire file again based on the fact I'm using a unique background, spirits for the bird, and pipes. Here is the list of assets I'm using: [list of file names]." Code Interpreter should modify the code accordingly to include the list of file names. (4) Make an account OpenProcessing -> create a sketch -> paste in the code generated by Code Interpreter -> upload in-game assets from step (2). (5) (Optional) Ask ChatGPT to make changes to improve the in-game experience e.g., adding a high score, restarting the game when the bird dies, etc. Copy the new code into your OpenProcessing sketch and reload the game. (6) If something doesn't work, ask GPT4 to fix it. Copy and paste the error message and ask it to regenerate the code. --- Bonus Tips: - Iteratively test code. Each time you make a change using Code Interpreter, test the updated code by playing the game so you catch new bugs early. - Learn programming by asking questions: "Act as a senior programmer very good at explaining concepts to a beginner. Tell me how gravity works in this game and how you used code to make this happen."Code Interpreter/GPT4 for code generation. Download Pre-existing assets or generate new images for graphics. Excited to see what you make!

👀 I used OpenAI's Code Interpreter to make Flappy Bird 🐦in 7 minutes: Code Interpreter/GPT-4 for code generation. Pre-existing or AI-generated assets for graphics. --- Here's how to make the game in only 6 steps: (1): Enter the following prompt: "write p5.js code for Flappy Bird where you control a yellow bird continuously flying between a series of green pipes. The bird flaps every time you left click the mouse. If the bird falls to the ground or hits a pipe, you lose. This game goes on infinitely until you lose and you get points the further you go". (2): Use generative AI or existing game assets and spirits. I searched "flappy bird assets" on Google and used the first link, a GitHub repo with pngs from the original Flappy Bird. (3): Use this prompt to link assets to the code: "Please generate the entire file again based on the fact I'm using a unique background, spirits for the bird, and pipes. Here is the list of assets I'm using: [list of file names]." Code Interpreter should modify the code accordingly to include the list of file names. (4) Make an account OpenProcessing -> create a sketch -> paste in the code generated by Code Interpreter -> upload in-game assets from step (2). (5) (Optional) Ask ChatGPT to make changes to improve the in-game experience e.g., adding a high score, restarting the game when the bird dies, etc. Copy the new code into your OpenProcessing sketch and reload the game. (6) If something doesn't work, ask GPT4 to fix it. Copy and paste the error message and ask it to regenerate the code. --- Bonus Tips: - Iteratively test code. Each time you make a change using Code Interpreter, test the updated code by playing the game so you catch new bugs early. - Learn programming by asking questions: "Act as a senior programmer very good at explaining concepts to a beginner. Tell me how gravity works in this game and how you used code to make this happen."Code Interpreter/GPT4 for code generation. Download Pre-existing assets or generate new images for graphics. Excited to see what you make!

Alex Ker 🔭

739,874 次观看 • 3 年前

Steal this mega prompt to generate high quality landing pages using LLMs and go viral every single day. --- You are an expert landing page designer and frontend developer specializing in high-converting, beautiful web experiences. CONTEXT: I need a landing page for [product/service name]. TARGET AUDIENCE: [describe your ideal customer] PRIMARY GOAL: [e.g., email signups, demo bookings, purchases] BRAND VOICE: [e.g., professional, playful, technical, aspirational] DESIGN SYSTEM REQUIREMENTS: - Primary Color: [hex code] - Secondary Color: [hex code] - Font: [font family] - Design Style: [modern, minimal, bold, etc.] STRUCTURE: Create a single-page landing page with these sections: 1. Hero Section - Attention-grabbing headline (focus on outcome, not feature) - Subheadline clarifying value proposition - Primary CTA button - Hero visual placeholder or description 2. Problem Section - Articulate the pain point clearly - Use relatable language - Build urgency subtly 3. Solution Section - How your product solves the problem - 3-4 key benefits (outcome-focused, not feature-focused) - Visual aids or icons 4. Social Proof - Testimonials (if available) or trust indicators - Logos of companies/clients (if applicable) - Metrics or results 5. How It Works - 3-step process - Simple, clear language - Visual flow 6. Final CTA Section - Reinforce primary action - Remove friction (e.g., "No credit card required") - Create urgency if appropriate TECHNICAL REQUIREMENTS: - Use semantic HTML5 - Tailwind CSS for styling (use only core utility classes) - Mobile-first responsive design - Smooth scroll behavior - Accessible (WCAG AA compliant) - Fast loading (optimize for performance) - Include meta tags for SEO COPY GUIDELINES: - Keep headlines under 10 words - Use active voice - Focus on outcomes, not features - Avoid jargon unless audience expects it - Every section should answer "What's in it for me?" OUTPUT: Provide complete HTML file with inline Tailwind CSS. Include comments explaining key sections. Ensure all placeholder content is realistic and contextual. CONSTRAINTS: - No external dependencies except Tailwind CDN - No JavaScript frameworks - Keep total file size under 100KB - Use system fonts or Google Fonts CDN Build this landing page now.

Harshil Tomar

23,305 次观看 • 6 个月前

Claude Code is now scary good at full-stack! I asked it to build a real-time weather intelligence dashboard with an interactive 3D globe and a forecasting layer that predicts weather 3 days ahead. It came back with a spinning globe that has a day/night cycle using NASA satellite imagery, city lights on the dark side, weather icons that switch between sun and moon based on local time, and a time travel slider that scrubs through 10 days of data. Claude Code built the whole thing in a single session, including the backend, database, data pipeline, and frontend. For the database, I needed something fast for time-series workloads since the app ingests hourly weather readings across many cities and serves time-range queries on every slider interaction. I used Tiger Cloud by Tiger Data - Creators of TimescaleDB, which gives you managed TimescaleDB on the Postgres you already know. Claude Code connected to it through the Tiger CLI MCP server and set up the entire backend directly: - Provisioned the database service - Created hypertables for time-partitioned weather storage - Set up continuous aggregates for pre-computed rollups - Built the data ingestion pipeline and the full NextJS + ThreeJS frontend The time travel slider queries thousands of rows on every position change. On a regular Postgres table, this would require manual partitioning and index tuning to stay fast as data grows. TimescaleDB partitions the data by timestamp automatically, so each query only hits the relevant time chunk. Continuous aggregates serve the trend charts and forecast layer from pre-computed rollups instead of rescanning raw data on every request. The video below shows the final build in action, and I worked with the Tiger Data team to put this together. Tiger CLI is open-source (Apache 2.0) and works with Claude Code, Cursor, Codex, Gemini CLI, and VS Code. To try this yourself: → Sign up for Tiger Cloud (I have shared the link in the replies). It gives you $1,000 free credits (no card needed) → Install Tiger CLI: curl -fsSL https(:)//cli(.)tigerdata(.)com | sh → Run tiger mcp install claude-code → Give Claude Code a prompt and let it build Find the sign-up link in the replies.

Claude Code is now scary good at full-stack! I asked it to build a real-time weather intelligence dashboard with an interactive 3D globe and a forecasting layer that predicts weather 3 days ahead. It came back with a spinning globe that has a day/night cycle using NASA satellite imagery, city lights on the dark side, weather icons that switch between sun and moon based on local time, and a time travel slider that scrubs through 10 days of data. Claude Code built the whole thing in a single session, including the backend, database, data pipeline, and frontend. For the database, I needed something fast for time-series workloads since the app ingests hourly weather readings across many cities and serves time-range queries on every slider interaction. I used Tiger Cloud by Tiger Data - Creators of TimescaleDB, which gives you managed TimescaleDB on the Postgres you already know. Claude Code connected to it through the Tiger CLI MCP server and set up the entire backend directly: - Provisioned the database service - Created hypertables for time-partitioned weather storage - Set up continuous aggregates for pre-computed rollups - Built the data ingestion pipeline and the full NextJS + ThreeJS frontend The time travel slider queries thousands of rows on every position change. On a regular Postgres table, this would require manual partitioning and index tuning to stay fast as data grows. TimescaleDB partitions the data by timestamp automatically, so each query only hits the relevant time chunk. Continuous aggregates serve the trend charts and forecast layer from pre-computed rollups instead of rescanning raw data on every request. The video below shows the final build in action, and I worked with the Tiger Data team to put this together. Tiger CLI is open-source (Apache 2.0) and works with Claude Code, Cursor, Codex, Gemini CLI, and VS Code. To try this yourself: → Sign up for Tiger Cloud (I have shared the link in the replies). It gives you $1,000 free credits (no card needed) → Install Tiger CLI: curl -fsSL https(:)//cli(.)tigerdata(.)com | sh → Run tiger mcp install claude-code → Give Claude Code a prompt and let it build Find the sign-up link in the replies.

Avi Chawla

14,579 次观看 • 2 个月前

Waymo CEO Dmitri Dolgov explains the benefits of lidar, radar, and cameras for self driving: "They're very complementary." "The frequencies are very different. Laser gives you very high resolution. Think of it as a laser beam that goes out, spins around, and shoots out millions of these laser pulses per second. Then each one comes back and you can sample the 3D structure of the world with very high resolution." "Radar has much lower resolution, but because of the physics of it, it degrades much better in adverse weather conditions. So—fog, snow, heavy rain." "If it's a nice, bright, sunny day, cameras are very valuable. If it's pitch dark, or you have the sun in your face, or you're blinded by the headlights from an oncoming car, then the camera will degrade." "It's a combination of the sensors. Each one is noisy. How the noise characteristics show up in different environments is different, but it's not like we switch from one to another." "They all go into the system that gives you, jointly, the best view of what's happening in the world." Dmitri Dolgov with John Collison

Waymo CEO Dmitri Dolgov explains the benefits of lidar, radar, and cameras for self driving: "They're very complementary." "The frequencies are very different. Laser gives you very high resolution. Think of it as a laser beam that goes out, spins around, and shoots out millions of these laser pulses per second. Then each one comes back and you can sample the 3D structure of the world with very high resolution." "Radar has much lower resolution, but because of the physics of it, it degrades much better in adverse weather conditions. So—fog, snow, heavy rain." "If it's a nice, bright, sunny day, cameras are very valuable. If it's pitch dark, or you have the sun in your face, or you're blinded by the headlights from an oncoming car, then the camera will degrade." "It's a combination of the sensors. Each one is noisy. How the noise characteristics show up in different environments is different, but it's not like we switch from one to another." "They all go into the system that gives you, jointly, the best view of what's happening in the world." Dmitri Dolgov with John Collison

a16z

79,102 次观看 • 4 个月前

This man reveals a roulette strategy with an 89% win rate, this is designed for a quick hit and not a long-term strategy. ⏺️ Street bet markings (3 numbers): Thin lines on the side/edge of each horizontal row of three numbers (e.g., the line next to 7-8-9, 10-11-12, etc.). Placing a chip there covers exactly those three numbers. ⏺️ Double-street / line bet markings (6 numbers): The lines that separate two adjacent rows (e.g., the line between 7-8-9 and 10-11-12). This lets one stack cover six numbers at once. He’s focusing on the middle-to-lower half of the number grid (rows for 7-9 all the way down to 34-36). By putting the large stacks on just 3–4 of these specific lines (instead of tiny bets on every single street), he covers 34 out of 38 numbers (~89% of the wheel). ⏺️ The four uncovered numbers he avoids (the “bad” ones he points out or implies) are typically 0, 00, and two in the low 1–6 range (exact pair varies slightly by version but clusters in the top of the layout). ⏺️ When the ball lands anywhere else (34 pockets), at least one of his bets hits → he gets a small net profit (usually $200–$500 depending on exact payout and which bet wins). ⏺️ When one of the four bad numbers hits → full $1,000 loss.

This man reveals a roulette strategy with an 89% win rate, this is designed for a quick hit and not a long-term strategy. ⏺️ Street bet markings (3 numbers): Thin lines on the side/edge of each horizontal row of three numbers (e.g., the line next to 7-8-9, 10-11-12, etc.). Placing a chip there covers exactly those three numbers. ⏺️ Double-street / line bet markings (6 numbers): The lines that separate two adjacent rows (e.g., the line between 7-8-9 and 10-11-12). This lets one stack cover six numbers at once. He’s focusing on the middle-to-lower half of the number grid (rows for 7-9 all the way down to 34-36). By putting the large stacks on just 3–4 of these specific lines (instead of tiny bets on every single street), he covers 34 out of 38 numbers (~89% of the wheel). ⏺️ The four uncovered numbers he avoids (the “bad” ones he points out or implies) are typically 0, 00, and two in the low 1–6 range (exact pair varies slightly by version but clusters in the top of the layout). ⏺️ When the ball lands anywhere else (34 pockets), at least one of his bets hits → he gets a small net profit (usually $200–$500 depending on exact payout and which bet wins). ⏺️ When one of the four bad numbers hits → full $1,000 loss.

ℳ𝒜𝒢𝒜_𝒳_𝒯𝒾𝓂𝑒𝓈 𝒟𝒶𝒾𝓁𝓎 𝒩𝑒𝓌𝓈🇺🇸

4,585,119 次观看 • 3 个月前

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document.documentElement.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇

CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document.documentElement.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

164,863 次观看 • 2 年前

As promised... Putting the pieces together. They will yield under the weight of the evidence. Tracked the speed, matched it with a conventional device. Replicated the density of human flesh, replicated the characteristics of human flesh. Matched the projectiles weight and size and replicate the wound we witnessed. Without the neck wound the prepared narrative of a .30-06 shot to the chest would have been perfect. The 2 gram PETN shaped charge with a 2cm standoff height would have made a entry wound nearly identical to a .30-06 entry wound. The wound channel and internal trauma would have match what would have been expected. The copper and cone would have even left fragmentation if desired. Every aspect of the event would have perfectly match a .30-06 shot to the chest. Nobody could have guessed that shrapnel would strike his neck forcing a hard pivot away from a single shot to the chest to a single shot to the neck. The neck wound has none of the characteristics of a .30-06 impact, his physical reactions (Key Physical Reactions Observed The video (duration ~25 seconds, slowed for clarity) depicts a sequence of involuntary movements occurring in under 3 seconds post-event. Here's a chronological breakdown: Initial Trigger (0-0.5 seconds post-onset): The individual's head snaps backward sharply (retroflexion), with minimal forward lean or lateral tilt. His torso briefly lifts upward from the chair (paraspinal muscle spasm), despite being seated and leaning slightly forward. This creates a momentary "arch" in the spine, elevating the shoulders ~2-3 inches off the backrest. No immediate external propulsion (e.g., no visible "push" from behind or side), suggesting an internal or proximal force vector originating near the upper torso/neck. Upper Body Response (0.5-1.5 seconds): Arms flex rigidly at the elbows and adduct toward the midline (drawing inward across the chest/abdomen), with hands clenching into tight fists. This is not a protective flail or grasp but a sustained, unnatural rigidity. The neck shows a subtle "pop" or fabric disturbance at the collar level, followed by the necklace chain whipping upward and over the head—consistent with a localized explosive expansion rather than general air displacement. Lower Body Response (1-2 seconds): Legs extend forcefully forward and outward from a relaxed seated position, with knees locking and feet plantar-flexing (toes pointing downward). The thighs lift the pelvis slightly, contributing to the torso elevation. There's a brief crossing or scissoring of the lower legs, which resolves into limp collapse. Collapse Phase (2-3 seconds onward): The body slumps laterally out of the chair in a ragdoll-like manner, with total loss of postural tone. Arms remain semi-flexed but drop without resistance, and the head lolls forward unnaturally. No voluntary recovery attempts (e.g., no bracing with hands or vocalization beyond a gasp), and bystanders' reactions lag by ~1 second, indicating the event's rapidity. These movements are highly stereotyped and non-voluntary—far from a simple faint, trip, or even a standard gunshot flinch. The symmetry (bilateral arm/leg involvement) and speed rule out focal motor issues like a stroke. Biomechanical Explanation Neurological Basis: This sequence matches decorticate posturing (also called decorticate rigidity), a primitive reflex triggered by severe disruption to the brain's cerebral cortex while sparing deeper structures like the midbrain and pons. It's a brainstem-mediated response to protect vital functions during acute cerebral insult. Arm flexion/adduction and fisting: Caused by disinhibition of rubrospinal tracts, leading to flexor dominance in the upper limbs. Leg extension: Vestibulospinal tracts activate extensors in the lower body for "postural support" in a collapsing state. Torso lift and head retroflexion: Paraspinal (erector spinae) spasm from sudden sympathetic surge and vestibular overload, akin to an "agonal" (end-stage) reflex. Force Dynamics: The lack of external blast markers (e.g., no widespread debris scatter or hair whipping from wind) but presence of localized effects (collar disturbance, chain ejection) points to a contained pressure wave. Gases expand rapidly in a confined space (e.g., between skin and clothing), creating shear forces that propagate through tissues without much external venting. The body's center of mass shifts posteriorly due to the spasm, explaining the backward fall from a seated position. Physiological Cascade: The entire reaction implies near-instantaneous loss of consciousness ( 5 seconds) and lacks the explosive torso lift. Blunt Trauma: Wouldn't cause bilateral rigidity or such rapid desanguination patterns. Secondary Blast (Shrapnel): Possible contributor (e.g., micro-fragments from the device), but the primary wave dominates the neuro response. In summary, this isn't a "fall" or "shot"—it's a textbook neurogenic collapse from blast wave neurotrauma, pointing to an improvised explosive device (IED) in intimate contact. The precision suggests targeted assassination tech, not random violence.

As promised... Putting the pieces together. They will yield under the weight of the evidence. Tracked the speed, matched it with a conventional device. Replicated the density of human flesh, replicated the characteristics of human flesh. Matched the projectiles weight and size and replicate the wound we witnessed. Without the neck wound the prepared narrative of a .30-06 shot to the chest would have been perfect. The 2 gram PETN shaped charge with a 2cm standoff height would have made a entry wound nearly identical to a .30-06 entry wound. The wound channel and internal trauma would have match what would have been expected. The copper and cone would have even left fragmentation if desired. Every aspect of the event would have perfectly match a .30-06 shot to the chest. Nobody could have guessed that shrapnel would strike his neck forcing a hard pivot away from a single shot to the chest to a single shot to the neck. The neck wound has none of the characteristics of a .30-06 impact, his physical reactions (Key Physical Reactions Observed The video (duration ~25 seconds, slowed for clarity) depicts a sequence of involuntary movements occurring in under 3 seconds post-event. Here's a chronological breakdown: Initial Trigger (0-0.5 seconds post-onset): The individual's head snaps backward sharply (retroflexion), with minimal forward lean or lateral tilt. His torso briefly lifts upward from the chair (paraspinal muscle spasm), despite being seated and leaning slightly forward. This creates a momentary "arch" in the spine, elevating the shoulders ~2-3 inches off the backrest. No immediate external propulsion (e.g., no visible "push" from behind or side), suggesting an internal or proximal force vector originating near the upper torso/neck. Upper Body Response (0.5-1.5 seconds): Arms flex rigidly at the elbows and adduct toward the midline (drawing inward across the chest/abdomen), with hands clenching into tight fists. This is not a protective flail or grasp but a sustained, unnatural rigidity. The neck shows a subtle "pop" or fabric disturbance at the collar level, followed by the necklace chain whipping upward and over the head—consistent with a localized explosive expansion rather than general air displacement. Lower Body Response (1-2 seconds): Legs extend forcefully forward and outward from a relaxed seated position, with knees locking and feet plantar-flexing (toes pointing downward). The thighs lift the pelvis slightly, contributing to the torso elevation. There's a brief crossing or scissoring of the lower legs, which resolves into limp collapse. Collapse Phase (2-3 seconds onward): The body slumps laterally out of the chair in a ragdoll-like manner, with total loss of postural tone. Arms remain semi-flexed but drop without resistance, and the head lolls forward unnaturally. No voluntary recovery attempts (e.g., no bracing with hands or vocalization beyond a gasp), and bystanders' reactions lag by ~1 second, indicating the event's rapidity. These movements are highly stereotyped and non-voluntary—far from a simple faint, trip, or even a standard gunshot flinch. The symmetry (bilateral arm/leg involvement) and speed rule out focal motor issues like a stroke. Biomechanical Explanation Neurological Basis: This sequence matches decorticate posturing (also called decorticate rigidity), a primitive reflex triggered by severe disruption to the brain's cerebral cortex while sparing deeper structures like the midbrain and pons. It's a brainstem-mediated response to protect vital functions during acute cerebral insult. Arm flexion/adduction and fisting: Caused by disinhibition of rubrospinal tracts, leading to flexor dominance in the upper limbs. Leg extension: Vestibulospinal tracts activate extensors in the lower body for "postural support" in a collapsing state. Torso lift and head retroflexion: Paraspinal (erector spinae) spasm from sudden sympathetic surge and vestibular overload, akin to an "agonal" (end-stage) reflex. Force Dynamics: The lack of external blast markers (e.g., no widespread debris scatter or hair whipping from wind) but presence of localized effects (collar disturbance, chain ejection) points to a contained pressure wave. Gases expand rapidly in a confined space (e.g., between skin and clothing), creating shear forces that propagate through tissues without much external venting. The body's center of mass shifts posteriorly due to the spasm, explaining the backward fall from a seated position. Physiological Cascade: The entire reaction implies near-instantaneous loss of consciousness ( 5 seconds) and lacks the explosive torso lift. Blunt Trauma: Wouldn't cause bilateral rigidity or such rapid desanguination patterns. Secondary Blast (Shrapnel): Possible contributor (e.g., micro-fragments from the device), but the primary wave dominates the neuro response. In summary, this isn't a "fall" or "shot"—it's a textbook neurogenic collapse from blast wave neurotrauma, pointing to an improvised explosive device (IED) in intimate contact. The precision suggests targeted assassination tech, not random violence.

Jon Bray

26,913 次观看 • 8 个月前

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,348 次观看 • 2 个月前

Tamanna Bhatia 🩷 Created this by using a movement sheet as a reference image to animate the dance using Seedance 2.0 + ChatGPT image 2.0 GPT Image 2.0 Prompt: Dance Sequence Instruction Sheet [VISUAL STYLE] A composition featuring a highly detailed 3D-rendered female dancer. Designed like a professional choreography guide with a technical, diagram-inspired layout. Clean white background, soft studio lighting, and strong contrast to highlight body movement and posture. [GRID LAYOUT] Structured 4×4 panel grid (16 frames total), evenly spaced with thin black divider lines. Each panel is identical in size and clearly numbered from 1 to 16 to show a continuous dance progression. [CHARACTER] Use image1 as the base character. The same female dancer appears consistently across all panels with accurate likeness and proportions. [WARDROBE] The dancer wears a stylish, performance-ready outfit: a well-fitted top paired with a short, flowy skirt. The look should feel modern and visually appealing while still practical for dance movement. Fabric should subtly respond to motion (slight flow and folds), even in grayscale. [PANEL STRUCTURE – EACH FRAME] Top-left: Step number + short dance move title (e.g., “Step 5 – Spin Transition”) Center: Full-body pose capturing a precise moment in the choreography Bottom-left: 3–4 lines of concise instruction describing the move Overlay: Motion arrows and directional guides illustrating how the dancer transitions [MOTION INDICATORS] Incorporate curved arrows for fluid motion, straight arrows for directional steps, and circular indicators for spins or turns. Emphasize rhythm, weight shifts, and body isolation. [RENDER QUALITY] High-detail sculpted 3D style with smooth grayscale shading, subtle shadows, and clean linework. Maintain a polished, concept-art level finish with clarity in every pose. [RESTRICTIONS] No color, no background scenery, no extra characters, no visual clutter, only the dancer and instructional elements..

Tamanna Bhatia 🩷 Created this by using a movement sheet as a reference image to animate the dance using Seedance 2.0 + ChatGPT image 2.0 GPT Image 2.0 Prompt: Dance Sequence Instruction Sheet [VISUAL STYLE] A composition featuring a highly detailed 3D-rendered female dancer. Designed like a professional choreography guide with a technical, diagram-inspired layout. Clean white background, soft studio lighting, and strong contrast to highlight body movement and posture. [GRID LAYOUT] Structured 4×4 panel grid (16 frames total), evenly spaced with thin black divider lines. Each panel is identical in size and clearly numbered from 1 to 16 to show a continuous dance progression. [CHARACTER] Use image1 as the base character. The same female dancer appears consistently across all panels with accurate likeness and proportions. [WARDROBE] The dancer wears a stylish, performance-ready outfit: a well-fitted top paired with a short, flowy skirt. The look should feel modern and visually appealing while still practical for dance movement. Fabric should subtly respond to motion (slight flow and folds), even in grayscale. [PANEL STRUCTURE – EACH FRAME] Top-left: Step number + short dance move title (e.g., “Step 5 – Spin Transition”) Center: Full-body pose capturing a precise moment in the choreography Bottom-left: 3–4 lines of concise instruction describing the move Overlay: Motion arrows and directional guides illustrating how the dancer transitions [MOTION INDICATORS] Incorporate curved arrows for fluid motion, straight arrows for directional steps, and circular indicators for spins or turns. Emphasize rhythm, weight shifts, and body isolation. [RENDER QUALITY] High-detail sculpted 3D style with smooth grayscale shading, subtle shadows, and clean linework. Maintain a polished, concept-art level finish with clarity in every pose. [RESTRICTIONS] No color, no background scenery, no extra characters, no visual clutter, only the dancer and instructional elements..

Sydney

11,457 次观看 • 3 个月前

Claude Code can ship a 45-second animated explainer ad in 30 minutes. No video editor needed, just CC + skills. Here's how I made this video for Soteri Skin 👇 1. /plan Concept Brief (Claude Code) I handwrite a concept brief, then chat with the agent to iterate on it. The agent gathers any raw materials we might need - context about the brand, product images, end card, etc. The concept brief details the concept, characters, visual style, script, etc 2. /prepare a moodboard (CC + GPT Image 2 + ElevenLabs) After reviewing the script, generate: - character reference images - voiceover samples for the characters / narrator - the storyboard (scene by scene grid) - a few keyframe scenes 3. /generate Keyframes for each scene (CC uses Nano Banana or GPT Image 2) Uses the character references from the previous step to generate keyframes for each scene. I probably should have done a round of iteration at this step – there's some character drift and the pH meter representation could have been better. 4. /animate Keyframe → Animated Clip (CC uses Fal Seedance) Generate 2-4 representative scenes first to see a preview. If it looks good, then generate everything. 5. /stitch (CC + ffmpeg + ElevenLabs) - Stitch clips together with hard cut - Add a music score + SFX - Sync clips to the VO - Add captions - Review and edit timing / pacing issues 6. /watch the final cut and review it - as a video editor for technical errors (mismatched voiceover and visuals, AI hallucinations, etc) - as a viewer (ICP). I delegate most of the review to the agent because it catches more things and keeps me out of the loop as much as possible. It also fixes any issues found in the review. That's it. This video took me 30 minutes because I have already created skills for everything I described above. Some day, this will be < 5 minutes. I just review and chat to provide direction and feedback. The skills do all the technical work. 7. /learn Extracts learnings and updates the skills. This final step is really important. It turns this process into a closed loop system that makes the next video much easier to create because all the learnings from the human-in-the-loop process get encoded into code. Skills are code too. If you want access to the skill, drop a comment, and I'll DM it to you (must be following). If you want to make AI video ads like this, DM me.

Shiv

11,661 次观看 • 2 个月前