Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

I feel like this could be turned into a cool hero effect for a component library site. Where you move your cursor to tear between the design and the code.... 🤔

mattrothenberg's profile picture

matt rothenberg

4,504 subscribers

40,363 görüntüleme • 3 ay önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

introducing: gooey effect component for Framer use this component to add morphing animations that blend and flow across your site for a fun, smooth effect. comment "GOOEY" and i’ll send you the component :)
0:11

introducing: gooey effect component for Framer use this component to add morphing animations that blend and flow across your site for a fun, smooth effect. comment "GOOEY" and i’ll send you the component :)

Framer University

25,555 görüntüleme • 1 yıl önce

introducing: elastic line component for Framer use this to add a wobbly, spring-like line that interacts with your cursor, bringing a playful vibe to your website.. comment 'ELASTIC' and i'll send you the component :)
0:13

introducing: elastic line component for Framer use this to add a wobbly, spring-like line that interacts with your cursor, bringing a playful vibe to your website.. comment 'ELASTIC' and i'll send you the component :)

Framer University

20,360 görüntüleme • 1 yıl önce

introducing: interactive 3d image distortion for Framer add a smooth distortion effect to your images that reacts to cursor movement—perfect for giving depth and interactivity to your designs. comment "DISTORT" and i’ll send you the component :)
0:10

introducing: interactive 3d image distortion for Framer add a smooth distortion effect to your images that reacts to cursor movement—perfect for giving depth and interactivity to your designs. comment "DISTORT" and i’ll send you the component :)

Framer University

18,691 görüntüleme • 11 ay önce

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI. Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment. For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor. X post: GitHub: Original site:
0:18

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI. Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment. For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor. X post: GitHub: Original site:

Meng To

174,126 görüntüleme • 7 gün önce

If you’d like to use this beautiful effect that Material Design has brought into our lives, grab the code from the link 🫡. Bundui Code:
0:17

If you’d like to use this beautiful effect that Material Design has brought into our lives, grab the code from the link 🫡. Bundui Code:

Toby

15,402 görüntüleme • 7 ay önce

I cloned the SpaceX site with Grok Build and Firecrawl. The new design cloner workflow in the Firecrawl CLI packaged the full page and 250+ artifacts into a design,md for the agent to build from. Great starting point for designing off any site you like.
0:19

I cloned the SpaceX site with Grok Build and Firecrawl. The new design cloner workflow in the Firecrawl CLI packaged the full page and 250+ artifacts into a design,md for the agent to build from. Great starting point for designing off any site you like.

Eric Ciarla (hiring)

23,838 görüntüleme • 2 ay önce

I want to open source the infinite grid component that I built for thiings[.]co Are there any good boilerplates for a simple React/TS component library? ChatGPT wasn't much help finding one. Or should I just get Cursor to scaffold something?
0:10

I want to open source the infinite grid component that I built for thiings[.]co Are there any good boilerplates for a simple React/TS component library? ChatGPT wasn't much help finding one. Or should I just get Cursor to scaffold something?

Charlie Clark

146,507 görüntüleme • 1 yıl önce

introducing: magnetic grid animation for Framer use this component to create responsive image grids that react to your cursor with scale, rotation, magnetism, and more. comment 'GRID' and i’ll send you the component :)
0:13

introducing: magnetic grid animation for Framer use this component to create responsive image grids that react to your cursor with scale, rotation, magnetism, and more. comment 'GRID' and i’ll send you the component :)

Framer University

26,763 görüntüleme • 1 yıl önce

Michael Arnaldi suggested cloning the effect repo as a git subtree, giving it to Claude, then using that as docs It sounds absurd, but it's actually kind amazing lol Setup a custom OpenCode agent that has all the context on where the files are then it kinda just works I feel like this could definitely be refined but idk if I even care enough. Stuff like cursor/opencode/claude code is already so good at searching codebases that I don't really care to do anything more
0:12

Michael Arnaldi suggested cloning the effect repo as a git subtree, giving it to Claude, then using that as docs It sounds absurd, but it's actually kind amazing lol Setup a custom OpenCode agent that has all the context on where the files are then it kinda just works I feel like this could definitely be refined but idk if I even care enough. Stuff like cursor/opencode/claude code is already so good at searching codebases that I don't really care to do anything more

Ben Davis

112,524 görüntüleme • 8 ay önce

Imagine if with a single button press, you could turn your child's sketches into a real 3D hero using AI. That would be incredibly cool!
0:12

Imagine if with a single button press, you could turn your child's sketches into a real 3D hero using AI. That would be incredibly cool!

Taras

752,172 görüntüleme • 2 yıl önce

Damn near shed a tear. While in theory he shouldn’t be the one having to dive for loose balls at his age, I promise you stuff like this matters. It has a trickle down effect on the team. Unbelievable.
0:18

Damn near shed a tear. While in theory he shouldn’t be the one having to dive for loose balls at his age, I promise you stuff like this matters. It has a trickle down effect on the team. Unbelievable.

Richard Staple, BSN, RN🇯🇲

55,061 görüntüleme • 4 ay önce

I made a Chrome extension that turns localhost into a visual editor for Cursor. Click any element on your dev site → describe what you want changed → it automatically sends the edit request to Cursor in the background with the element context. Here's how it works...
0:18

I made a Chrome extension that turns localhost into a visual editor for Cursor. Click any element on your dev site → describe what you want changed → it automatically sends the edit request to Cursor in the background with the element context. Here's how it works...

pav

968,527 görüntüleme • 10 ay önce

So lemme show you what i am working on rn Klick (might change the name later) It’s basically gonna be a cursor click animation library, you will be able to add really cool click animations to your cards, pages, and components with just one CLI command. And this is the homepage i designed for it, tell me how it looks This project is gonna be crazy, i have spent a lot of time making sure everything feels really polished and good, just wait till i complete it, it’s gonna be insane
0:17

So lemme show you what i am working on rn Klick (might change the name later) It’s basically gonna be a cursor click animation library, you will be able to add really cool click animations to your cards, pages, and components with just one CLI command. And this is the homepage i designed for it, tell me how it looks This project is gonna be crazy, i have spent a lot of time making sure everything feels really polished and good, just wait till i complete it, it’s gonna be insane

Devster☄️

164,329 görüntüleme • 2 ay önce

🎉 introducing: magnetic hover for Framer use this to create a smooth, magnetic pull effect that adds an interactive touch to your designs. comment "MAGNETIC" and I'll send you the component :)
0:13

🎉 introducing: magnetic hover for Framer use this to create a smooth, magnetic pull effect that adds an interactive touch to your designs. comment "MAGNETIC" and I'll send you the component :)

Framer University

20,981 görüntüleme • 1 yıl önce

good animations are hard to find so i turned into a library ⚡️ looking for more to upload, so feel free to share under
0:19

good animations are hard to find so i turned into a library ⚡️ looking for more to upload, so feel free to share under

Fabian

72,360 görüntüleme • 1 yıl önce

FREE template built in Framer ✨🖱 Uses a cool cursor effect, 100% built in Framer Comment "Framer" and I'll send it to you 👇 (must be following so I can DM you)
0:13

FREE template built in Framer ✨🖱 Uses a cool cursor effect, 100% built in Framer Comment "Framer" and I'll send it to you 👇 (must be following so I can DM you)

Ryan Hayward

28,304 görüntüleme • 3 yıl önce

Claude Design + Shopify is f*cking ridiculous 🤯 You can now publish pages from Claude Design → Claude Code → Shopify. Built 100% with Claude Design, Claude Code, and the Shopify CLI. Perfect for DTC brands and agencies who want to skip the design → dev handoff entirely. Here's how it works: → Design any landing page in Claude Design → Export as a zip and drop it into Claude Code → Install the Shopify + Shopify AI Toolkit plugins → Prompt Claude to convert the HTML into a Shopify page template + push to live theme → Claude uploads the images, deploys the files, and creates a published page No more handing designs off to a dev and waiting 2 weeks for a Shopify page. What you get: - A workflow that turns any Claude Design page into a real Shopify page template - Editable sections so your marketing team can swap copy, images, and CTAs without code - Images uploaded straight to Shopify Files automatically - A files-only deploy that only touches what's new in your live theme - A repeatable pipeline you can use every time you design a new landing page This is essentially the design-to-deploy pipeline brands have been waiting for. I put together a step-by-step playbook for going from Claude Design → published Shopify page. Every install, every plugin, every command, and the exact prompt that runs the whole thing. Want the playbook for free? > Like this post > Comment "SHOP" And I'll send it over (must be following so I can DM)
0:17

Claude Design + Shopify is f*cking ridiculous 🤯 You can now publish pages from Claude Design → Claude Code → Shopify. Built 100% with Claude Design, Claude Code, and the Shopify CLI. Perfect for DTC brands and agencies who want to skip the design → dev handoff entirely. Here's how it works: → Design any landing page in Claude Design → Export as a zip and drop it into Claude Code → Install the Shopify + Shopify AI Toolkit plugins → Prompt Claude to convert the HTML into a Shopify page template + push to live theme → Claude uploads the images, deploys the files, and creates a published page No more handing designs off to a dev and waiting 2 weeks for a Shopify page. What you get: - A workflow that turns any Claude Design page into a real Shopify page template - Editable sections so your marketing team can swap copy, images, and CTAs without code - Images uploaded straight to Shopify Files automatically - A files-only deploy that only touches what's new in your live theme - A repeatable pipeline you can use every time you design a new landing page This is essentially the design-to-deploy pipeline brands have been waiting for. I put together a step-by-step playbook for going from Claude Design → published Shopify page. Every install, every plugin, every command, and the exact prompt that runs the whole thing. Want the playbook for free? > Like this post > Comment "SHOP" And I'll send it over (must be following so I can DM)

Mike Futia

57,469 görüntüleme • 2 ay önce

Trailing images effect in Framer Paul Lapkin was asking this effect in Framer. I found it's interesting and replicated it as a component with some animation customizations. Feel free to copy and use it your project 🙌
0:14

Trailing images effect in Framer Paul Lapkin was asking this effect in Framer. I found it's interesting and replicated it as a component with some animation customizations. Feel free to copy and use it your project 🙌

Duy Luong

47,151 görüntüleme • 3 yıl önce

made a 3D cat that's obsessed with your cursor i feel like the cat in some ways as i build this what should i replace the cursor with? a laser pointer? treats? made with claude & three․ws
0:16

made a 3D cat that's obsessed with your cursor i feel like the cat in some ways as i build this what should i replace the cursor with? a laser pointer? treats? made with claude & three․ws

nich

62,878 görüntüleme • 2 ay önce