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

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

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

На главную

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

7,549 subscribers

119,817 просмотров • 8 месяцев назад •via X (Twitter)

Наука и технологии

Anya Rossi• Live Now

Private livecam show

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

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

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

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

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

Soren

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

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Another weekend project: GridStore Jean Cavallera and I are building simple but useful dApps that make LUKSO more accessible and easier to use. This is GridStore, an “app store” for Grid templates. You can choose a template you like and, with a single transaction, upload it to your Universal Profile and use it as your Grid. This is made possible by LSP28 The Grid, where the configurations of your Grid are stored in a JSON file on IPFS. The value stored under your ⁩LSP28TheGrid⁨ data key stored on your Universal Profile points to your grid configuration JSON file. By adding the value of a grid template you like under the ⁩LSP28TheGriddata key, you can set immediately that template on your Grid and start customizing it, saving you time. If you have ideas for useful templates for brands, artists, influencers, or any other use case: set up the Grid on a Universal Profile, go to look up the profile, and send me the “Raw value” together with a short explanation of the Grid so it can be added to the store. Or add your own templates to the store by opening a PR: It would really help if we can create some high-quality templates that the whole community can use. You can check out the store here:

JordyDutch

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

This is the Existence Grid. It was inspired by the idea of seeing your entire life laid out in weeks. How much you have created and how much you still have to create. The grid is designed to show your life in years, months, weeks, and days. Not just as time passing, but as time created. For me, that is 51 years, 618 months, 2,686 weeks, and 18,802 days. It all began with one time block. June 28th, 1974 at 6:50am. The first block of my existence. This grid becomes the record of what you have created. The true story of you. Learn more about Existence here:

This is the Existence Grid. It was inspired by the idea of seeing your entire life laid out in weeks. How much you have created and how much you still have to create. The grid is designed to show your life in years, months, weeks, and days. Not just as time passing, but as time created. For me, that is 51 years, 618 months, 2,686 weeks, and 18,802 days. It all began with one time block. June 28th, 1974 at 6:50am. The first block of my existence. This grid becomes the record of what you have created. The true story of you. Learn more about Existence here:

Rob Dyrdek

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

PG&E and Tesla have just announced that the Cybertruck, Tesla Powershare Gateway and Tesla Universal Wall Connector have all been approved for participation in PG&E's residential Vehicle‑to‑Everything (V2X) program, marking a major milestone for bidirectional EV integration in California. This marks the first AC vehicle-to-grid application approved for customers in California, enabling vehicles to connect using much simpler equipment rather than specialized DC infrastructure. PG&E customers with Cybertrucks will now be able to use their vehicle to power their home in an outage and earn money by selling power back to the electric grid during grid events. "Electric vehicles can do more than move people—they can help power homes and support the grid," said Jason Glickman, Executive VP of Strategy and Growth, PG&E. "By welcoming Tesla into our residential V2X program, we're expanding customer choice while making California's grid more flexible, resilient, and affordable. Powershare Grid Support enables Tesla vehicles to strengthen our electricity system, while earning money for EV owners." More info below:

PG&E and Tesla have just announced that the Cybertruck, Tesla Powershare Gateway and Tesla Universal Wall Connector have all been approved for participation in PG&E's residential Vehicle‑to‑Everything (V2X) program, marking a major milestone for bidirectional EV integration in California. This marks the first AC vehicle-to-grid application approved for customers in California, enabling vehicles to connect using much simpler equipment rather than specialized DC infrastructure. PG&E customers with Cybertrucks will now be able to use their vehicle to power their home in an outage and earn money by selling power back to the electric grid during grid events. "Electric vehicles can do more than move people—they can help power homes and support the grid," said Jason Glickman, Executive VP of Strategy and Growth, PG&E. "By welcoming Tesla into our residential V2X program, we're expanding customer choice while making California's grid more flexible, resilient, and affordable. Powershare Grid Support enables Tesla vehicles to strengthen our electricity system, while earning money for EV owners." More info below:

Sawyer Merritt

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

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

CSS Tip! 🎠 You can create a responsive infinite marquee animation with container queries and no duplicate items 🤙 li{ animation: slide; } @keyframes slide { to { translate: 0% calc(var(--i) * -100%);}} The trick is animating the items, not the list 😎 More tricks 👇 To get this one working, you need to animate the items and not the list (Watch the video first?). Each item needs to know its row index (--i) in the list and the parent needs to know how many rows are in the list: ul { --count: 12; } li:nth-of-type(1), li:nth-of-type(2) { --i: 0; } li:nth-of-type(3), li:nth-of-type(4) { --i: 1; } Once you have that, translate each item based on its row index in the list li { translate: 0% calc((var(--count) - var(--i)) * 100%); } Now for the animation. The key here is that each row has an animation-delay calculated from its index (--i). That number is offset to make it negative so the animation start is offset ✨ ul { --duration: 10s; } li { --delay: calc((var(--duration) / var(--count)) * (var(--i) - 8)); animation: slide var(--duration) var(--delay) infinite linear; } Make sure to wrap that animation in: @media (prefers-reduced-motion: no-preference) { ... } Lastly, the fun parts! 🤓 To create the "vignette" mask. Use a layered mask on the container 😷 .scene { --buff: 3rem; height: 100%; width: 100%; mask: linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); mask-composite: intersect; } To create the 3D skewed effect, use a chained transform (Try toggling it in the demo ⚡️): .grid { transform: rotateX(20deg) rotateZ(-20deg) skewX(20deg); } As for the responsive part, use container queries! 🔥 article { container-type: inline-size; } When the article (card) is narrower than 400px update the grid and animation settings 🤙 Double the rows means double the duration! @container (width < 400px) { .grid { --count: 12; grid-template-columns: 1fr; } li:nth-of-type(1) { --i: 0; } li:nth-of-type(2) { --i: 1; } li:nth-of-type(3) { --i: 2; } li:nth-of-type(4) { --i: 3; } li { --duration: 20s; } } CSS has the magic to be able to update those animations at runtime based on your custom property values 😎 An added bonus in this demo is that it doesn't require any JavaScript at all, for any of it 🤯 We can use CSS :has() for those toggles that update the styles, even the theme toggle! 🫶 Any questions, let me know! Make sure to check out the video. Will do a walkthrough one to follow-up 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

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

In 2016, South Australia learned what happens when a grid leans too hard on the wind. The Aussie state led the world in renewable dependence, with about 40% of its electricity coming from wind. Then a strong storm hit, and no less than nine wind farms cut their output, removing more than 450 megawatts in a matter of seconds. That cumulative loss tripped the Heywood interconnector, and the entire state went dark - about 1.7 million people without power. An official AEMO report found the sudden reduction in wind output was the key driver of the system collapse. South Australia had to restart the grid using diesel black-start generators and gas power plants. A weather-dependent grid died in seconds, and only fossil fuels brought it back.

In 2016, South Australia learned what happens when a grid leans too hard on the wind. The Aussie state led the world in renewable dependence, with about 40% of its electricity coming from wind. Then a strong storm hit, and no less than nine wind farms cut their output, removing more than 450 megawatts in a matter of seconds. That cumulative loss tripped the Heywood interconnector, and the entire state went dark - about 1.7 million people without power. An official AEMO report found the sudden reduction in wind output was the key driver of the system collapse. South Australia had to restart the grid using diesel black-start generators and gas power plants. A weather-dependent grid died in seconds, and only fossil fuels brought it back.

Electroverse

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

BUZZ 🐝 A short sequence created using Nano Banana Pro and Grok imagine. I wanted to test Groks capabilities for action in motion. With Buzz leading the way, Tiny Timmy is having the absolute time of his life exploring the wondrous Flower Kingdom🌼 Tools for creation: - Nano Banana Pro was used to generate the base image and the additional camera angles. I wanted to personally see if I could just use 3 images so no 2x2 grid extraction technique for this but I did want to include each frame used so you can see how the sequence was combined. Grok Imagine was used for every sequence to bring it to life using image to video. - I did some post work in Capcut by adding some subtle bloom, radial motion blur and film grain as well. - I added additional sound effects by generating them using Elevenlabs and layering them (bee buzzing, flapping wings, wind and leaves rustling etc). The kids laughter was generated using Grok. The soundtrack was sourced from Artlist. It was fun testing this and putting it together just to see what Grok is capable of generating.

BUZZ 🐝 A short sequence created using Nano Banana Pro and Grok imagine. I wanted to test Groks capabilities for action in motion. With Buzz leading the way, Tiny Timmy is having the absolute time of his life exploring the wondrous Flower Kingdom🌼 Tools for creation: - Nano Banana Pro was used to generate the base image and the additional camera angles. I wanted to personally see if I could just use 3 images so no 2x2 grid extraction technique for this but I did want to include each frame used so you can see how the sequence was combined. Grok Imagine was used for every sequence to bring it to life using image to video. - I did some post work in Capcut by adding some subtle bloom, radial motion blur and film grain as well. - I added additional sound effects by generating them using Elevenlabs and layering them (bee buzzing, flapping wings, wind and leaves rustling etc). The kids laughter was generated using Grok. The soundtrack was sourced from Artlist. It was fun testing this and putting it together just to see what Grok is capable of generating.

Travis Davids

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

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 просмотров • 2 месяцев назад

FIRST TEST Seedance 2.0! From my initial tests, this is one of the more impressive AI video models I’ve tried so far. Dynamic motion feels fluid, prompt adherence is solid, and the efficiency really stood out, very little iteration needed. Everything you see here was generated using just one reference image + one prompt. I also tested a 3×3 image grid with no prompt at all, and the results stayed surprisingly consistent. Another highlight: sound design is already included, and it actually works really well. Tested via BytePlus 👉 More detail and access link to try Seedance 2.0 is in the comments.

FIRST TEST Seedance 2.0! From my initial tests, this is one of the more impressive AI video models I’ve tried so far. Dynamic motion feels fluid, prompt adherence is solid, and the efficiency really stood out, very little iteration needed. Everything you see here was generated using just one reference image + one prompt. I also tested a 3×3 image grid with no prompt at all, and the results stayed surprisingly consistent. Another highlight: sound design is already included, and it actually works really well. Tested via BytePlus 👉 More detail and access link to try Seedance 2.0 is in the comments.

Dinda Prasetyo

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

"What are people worried about with AI? They’re worried about U.S. vs China. You look at China’s grid — in 2010, the US & China were neck x neck. That’s where the two lines cross on the chart. Since then, China’s 2x'd its grid while we’ve stayed flat. China has the US in a chokehold, and it’s going to be 3x by the 2030s if we don’t do something about it. I think it just highlights the urgency & the importance. No matter what you’re worried about, energy production has been a big mistake that we haven’t expanded over the last few decades." "Energy production & consumption is directly linked to GDP. It drives things like AI." "By 2030, it’s predicted to consume the equivalent of all the power that’s on the US grid today." Scott Nolan (Scott Nolan), CEO of General Matter

"What are people worried about with AI? They’re worried about U.S. vs China. You look at China’s grid — in 2010, the US & China were neck x neck. That’s where the two lines cross on the chart. Since then, China’s 2x'd its grid while we’ve stayed flat. China has the US in a chokehold, and it’s going to be 3x by the 2030s if we don’t do something about it. I think it just highlights the urgency & the importance. No matter what you’re worried about, energy production has been a big mistake that we haven’t expanded over the last few decades." "Energy production & consumption is directly linked to GDP. It drives things like AI." "By 2030, it’s predicted to consume the equivalent of all the power that’s on the US grid today." Scott Nolan (Scott Nolan), CEO of General Matter

Molly O’Shea

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

$Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇$

Future CSS Tip! 🍏 You could create those Apple-style dynamic CTA reveals with container style queries and scroll-driven animations with zero JavaScript 👀 (Sticking to the #AppleEvent theme) .cta { animation: activate both, activate reverse; animation-timeline: --section, view(); animation-range: entry, cover 50%; } keyframes activate { 0% { --active: 0; } 100% { --active: 1; } } @ container style(--active: 1) { .cta__bloom { scale: 0.99; transition: scale 0.5s var(--back); /* 👈 linear() */ } .cta a { scale: 1; grid-template-columns: var(--content-size, auto) 36px; transition: scale 0.2s 0s, grid-template-columns 0.5s 0.6s var(--elastic); } } There's a fair bit of code here 🤯 But, the idea is this... 1. Use a scroll-driven animation scoped to each section for each CTA to change a custom property value (--activate) between 1 and 0. 2. Use a container style query to dictate the transition sequence for each moving part making use of transition-delay. 3. Make use of linear() easing to get the right effect ⚡️ It's wild to put all these APIs together and see what's possible. There are likely some spots to tidy this up 💯 These are powerful combinations for sure though! 💪 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

They are putting DATA CENTERS in the ocean now. Panthalassa, a startup from Portland, just raised $140 MILLION. what they do: build floating platforms that sit out at sea and run AI. no power grid needed. the ocean waves make all the electricity. the seawater keeps the chips cool. How it works: big floating balls bob up and down with the waves. that motion makes power. the power runs the AI chips inside. backed by PETER THIEL. company now worth almost $1 BILLION. land is running out of room and power for AI. so the next move is simple. go to the sea.

They are putting DATA CENTERS in the ocean now. Panthalassa, a startup from Portland, just raised $140 MILLION. what they do: build floating platforms that sit out at sea and run AI. no power grid needed. the ocean waves make all the electricity. the seawater keeps the chips cool. How it works: big floating balls bob up and down with the waves. that motion makes power. the power runs the AI chips inside. backed by PETER THIEL. company now worth almost $1 BILLION. land is running out of room and power for AI. so the next move is simple. go to the sea.

shirish

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

$Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇$

Future CSS Tip! 🍏 You can create that Apple style blow out text effect with CSS scroll-driven animations ⚡️ No JavaScript! The trick is to animate SVG text along the z-axis using 3D transforms 👀 .word { animation: blow-out both ease-in; animation-timeline: --section; 👈 animation-range: exit-crossing 10% exit 0%; } keyframes blow-out { to { transform: translate3d(0.05ch, 0, 99vh); } } The animation makes the text cover the viewport and blends into the next section which has the same background-color 🤙 The section is set to 200vh. But the wrapper around the SVG text defines perspective and transform-style .section__content { transform-style: preserve-3d; 👈 perspective: 100vh; } We're using an SVG to maintain the crispness of the text as it scales up ✨ Use these attributes on the within the SVG to align things 🤙 Your Name It's the last day of #AppleEvent week but I do have some more of these I'll put together next week 😉 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

Design Engineering Tip: Separate the object from its shadow. When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality. Used carefully, this can make interfaces feel more tangible and less like layers floating on a screen. It's not something I'd apply everywhere, but for moments that need extra emphasis, it can be surprisingly effective. js const card = document.querySelector(".notification"); const shadow = document.querySelector(".shadow"); card.animate( [ { transform: "translateY(0)" }, { transform: "translateY(-160px)" }, ], { duration: 900, easing: "cubic-bezier(.64,0,.78,0)" } ); shadow.animate( [ { opacity: 0.5, transform: "scaleX(1)" }, { opacity: 0, transform: "scaleX(.35)" }, ], { duration: 700, easing: "ease-out" } );

Design Engineering Tip: Separate the object from its shadow. When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality. Used carefully, this can make interfaces feel more tangible and less like layers floating on a screen. It's not something I'd apply everywhere, but for moments that need extra emphasis, it can be surprisingly effective. js const card = document.querySelector(".notification"); const shadow = document.querySelector(".shadow"); card.animate( [ { transform: "translateY(0)" }, { transform: "translateY(-160px)" }, ], { duration: 900, easing: "cubic-bezier(.64,0,.78,0)" } ); shadow.animate( [ { opacity: 0.5, transform: "scaleX(1)" }, { opacity: 0, transform: "scaleX(.35)" }, ], { duration: 700, easing: "ease-out" } );

Gabriel

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

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

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

🇮🇷🇺🇸🇮🇱 Iran's South Pars. The world’s largest gas field ablaze. 730 million cubic metres of gas produced there daily in 2025. Turkey buys it, Iraq runs its electricity grid on it. Qatar shares the field with their North Dome at the same reservoir and condemned the strike as “dangerous and irresponsible.” The country Washington calls its closest Gulf ally just watched Israel bomb their gas field and called it what it is. Brent hit $109. European gas futures jumped 9%. This is what happens when you let a country with a 40 year "dream" run your foreign policy. Iran has now listed 5 facilities for retaliation including Saudi Arabia’s SAMREF refinery and Jubail petrochemical complex, the UAE’s Al Hosn gasfield, Qatar’s Ras Laffan and Mesaieed complex. Iran promising to hit within hours. Trump called this putting Iran “out of business.” Iran responded by cutting all gas supplies to Iraq immediately. Iraq’s electricity grid is set to go dark. The region is is now in a full energy infrastructure war that no strategic petroleum reserve on earth can paper over.

🇮🇷🇺🇸🇮🇱 Iran's South Pars. The world’s largest gas field ablaze. 730 million cubic metres of gas produced there daily in 2025. Turkey buys it, Iraq runs its electricity grid on it. Qatar shares the field with their North Dome at the same reservoir and condemned the strike as “dangerous and irresponsible.” The country Washington calls its closest Gulf ally just watched Israel bomb their gas field and called it what it is. Brent hit $109. European gas futures jumped 9%. This is what happens when you let a country with a 40 year "dream" run your foreign policy. Iran has now listed 5 facilities for retaliation including Saudi Arabia’s SAMREF refinery and Jubail petrochemical complex, the UAE’s Al Hosn gasfield, Qatar’s Ras Laffan and Mesaieed complex. Iran promising to hit within hours. Trump called this putting Iran “out of business.” Iran responded by cutting all gas supplies to Iraq immediately. Iraq’s electricity grid is set to go dark. The region is is now in a full energy infrastructure war that no strategic petroleum reserve on earth can paper over.

THE ISLANDER

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