Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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....

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

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

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

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

🎓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 görüntüleme • 2 yıl önce

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