Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Palash Bansal

3,272 subscribers

30,459 Aufrufe • vor 3 Monaten •via X (Twitter)

Bildung Wissenschaft & Technologie #threejs #webgl #webgpu

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

Palash Bansal

16,069 Aufrufe • vor 3 Monaten

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,497 Aufrufe • vor 3 Monaten

$Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.$

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.

How To Prompt

234,334 Aufrufe • vor 7 Tagen

Zero Hand Tracking is here! Working on the OS and sensor integration. Accesibility is key, that's why apps are HTML/CSS/JS 2D web apps render as panels in front of you. It's really easy to make this kind of app for Zero 3D apps, like below, run over WebXR, here using #threejs

Zero Hand Tracking is here! Working on the OS and sensor integration. Accesibility is key, that's why apps are HTML/CSS/JS 2D web apps render as panels in front of you. It's really easy to make this kind of app for Zero 3D apps, like below, run over WebXR, here using #threejs

Miroslav Kotalík

13,113 Aufrufe • vor 1 Jahr

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,339 Aufrufe • vor 1 Jahr

Here is a quick walkthrough of everything new in Stitch: 🌊 Streaming: Stitch now streams its work straight to the canvas. You can see Stitch working and start steering before the final product is done! 📄 Existing Designs: Stitch can help you start with your design by creating a DESIGN.md from your codebase, .fig files, or a live website ⏩ In-place AI Edits: Stitch can quickly edit specific parts of your screens just by asking or pointing and clicking 🎥 Motion & HTML canvas: Javascript, shaders and more now render natively on an HTML canvas so you can immediately see animation, hover states and effects 🚀 Portability and Integrations: We've added a big list of import and export additions to fit right into your workflow, including import your .fig files and one-click export to Netlify, Loveable and Bolt 🌟 Bonus: New skills to IMPORT your screens directly into Stitch via MCP and sync changes back to your codebase Walkthrough video👇 Details for each improvement in 🧵

Here is a quick walkthrough of everything new in Stitch: 🌊 Streaming: Stitch now streams its work straight to the canvas. You can see Stitch working and start steering before the final product is done! 📄 Existing Designs: Stitch can help you start with your design by creating a DESIGN.md from your codebase, .fig files, or a live website ⏩ In-place AI Edits: Stitch can quickly edit specific parts of your screens just by asking or pointing and clicking 🎥 Motion & HTML canvas: Javascript, shaders and more now render natively on an HTML canvas so you can immediately see animation, hover states and effects 🚀 Portability and Integrations: We've added a big list of import and export additions to fit right into your workflow, including import your .fig files and one-click export to Netlify, Loveable and Bolt 🌟 Bonus: New skills to IMPORT your screens directly into Stitch via MCP and sync changes back to your codebase Walkthrough video👇 Details for each improvement in 🧵

Stitch by Google

21,597 Aufrufe • vor 2 Monaten

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,496 Aufrufe • vor 1 Jahr

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,704 Aufrufe • vor 2 Jahren

Working on sparse volumetric light maps for WebGPU. Got generation part sorted. The resolution is adaptive, refining near geometry and skipping through most of the empty space. The video is question uses a map that's only 10MB in size, including everything. That's less the amount of GPU memory that a single leaf takes up on one of threes in the scene, or texture on one of the sign-posts. We get about 1 sample every 30 centimeters in the world space. As a side note: gave my renderer quite the workout, rendering each probe as a separate non-instanced mesh for debugging.

Working on sparse volumetric light maps for WebGPU. Got generation part sorted. The resolution is adaptive, refining near geometry and skipping through most of the empty space. The video is question uses a map that's only 10MB in size, including everything. That's less the amount of GPU memory that a single leaf takes up on one of threes in the scene, or texture on one of the sign-posts. We get about 1 sample every 30 centimeters in the world space. As a side note: gave my renderer quite the workout, rendering each probe as a separate non-instanced mesh for debugging.

Alex Goldring

18,651 Aufrufe • vor 5 Monaten

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

729,349 Aufrufe • vor 2 Jahren

long time no posting, here's some of the stuff we released in helium recently: - customizable keyboard shortcuts on all platforms - automatic updates on windows - frameless mode (previously zen mode), with floating sidebar, is now out of beta and included in settings by default - improved fingerprint noising: fixed the canvas noising algorithm and added protections against analysis attacks (thank you Cynthia 🐈 for your report, research, and assistance) - tab URL copying, one or multiple, formatted as a list with line breaks - manual tab hibernation, with an option to hibernate all tabs except for selected/active ones - an option to close tabs to the left (or above, in vertical layout) - redesigned toast notifications, now anchored to the active web page, and no longer blinding in dark mode - toast notification about newly opened background tabs in frameless mode (can be disabled in settings) - redesigned the infobar, it no longer looks out of place - improved QR code generation, now it's actually useful - downloads bubble is now shown instead of the full page whenever applicable - kagi search now supports reverse image search from image context menu - frameless mode animations are now smoother - better color contrast in light and dark modes - a lot of bug fixes and other minor improvements all of these changes are present in the latest version of helium. if you're using helium on windows, please update to the latest version, so your browser can be updated automatically from now on!

long time no posting, here's some of the stuff we released in helium recently: - customizable keyboard shortcuts on all platforms - automatic updates on windows - frameless mode (previously zen mode), with floating sidebar, is now out of beta and included in settings by default - improved fingerprint noising: fixed the canvas noising algorithm and added protections against analysis attacks (thank you Cynthia 🐈 for your report, research, and assistance) - tab URL copying, one or multiple, formatted as a list with line breaks - manual tab hibernation, with an option to hibernate all tabs except for selected/active ones - an option to close tabs to the left (or above, in vertical layout) - redesigned toast notifications, now anchored to the active web page, and no longer blinding in dark mode - toast notification about newly opened background tabs in frameless mode (can be disabled in settings) - redesigned the infobar, it no longer looks out of place - improved QR code generation, now it's actually useful - downloads bubble is now shown instead of the full page whenever applicable - kagi search now supports reverse image search from image context menu - frameless mode animations are now smoother - better color contrast in light and dark modes - a lot of bug fixes and other minor improvements all of these changes are present in the latest version of helium. if you're using helium on windows, please update to the latest version, so your browser can be updated automatically from now on!

Helium

101,273 Aufrufe • vor 1 Monat

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀

John Champ

10,940 Aufrufe • vor 1 Jahr

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,487 Aufrufe • vor 2 Jahren

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: Three.js #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

Ibrahim Boona

58,625 Aufrufe • vor 3 Monaten

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,163 Aufrufe • vor 2 Jahren

Car configurator you have never seen before! 👀 👇 What tech stack does it use? Read below and don't forget to repost. 😎 💿 Front-end: - React - ThreeJS ( - Hammer.js ( - GSAP ( 🧰Utility stack: - Envoy - Open Graph 🔗 As a car lover I usually go through a car configurators and I spend some time in them. 🚙 This site is not a car configurator directly, but it is so well done that I think almost every car manufacturer should have this option of viewing their cars. 🚘 Usually, in an image/really simple 3D you cannot see the correct car color, etc., but this site made it much better! 👏 🚨 Build site like these with ready-to-build boilerplate at this link Please consider like, repost and comment, it will help me to build more content like this. 🙏 #backend #uiux #uiuxdesign #CSS #CSSBattleChallenge #HTML #typescript #WordPress #vue #nuxtjs

Car configurator you have never seen before! 👀 👇 What tech stack does it use? Read below and don't forget to repost. 😎 💿 Front-end: - React - ThreeJS ( - Hammer.js ( - GSAP ( 🧰Utility stack: - Envoy - Open Graph 🔗 As a car lover I usually go through a car configurators and I spend some time in them. 🚙 This site is not a car configurator directly, but it is so well done that I think almost every car manufacturer should have this option of viewing their cars. 🚘 Usually, in an image/really simple 3D you cannot see the correct car color, etc., but this site made it much better! 👏 🚨 Build site like these with ready-to-build boilerplate at this link Please consider like, repost and comment, it will help me to build more content like this. 🙏 #backend #uiux #uiuxdesign #CSS #CSSBattleChallenge #HTML #typescript #WordPress #vue #nuxtjs

Matthew Husák

14,221 Aufrufe • vor 2 Jahren

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,256 Aufrufe • vor 2 Monaten

PROMPT DROP 🚨 for Creators & NFT Collectors. 🎨 Minting the Self: Genesis of the Living Canvas🪽 The prompt is optimised to inherit the style, colour palette, and personality of your character. 💀 Drop your creations below 🌐 Keen to see what you mint 👀 🚨PROMPT👇🏼 Use the provided PFP/NFT character as the primary reference. The character must remain fully recognizable and true to its original design—preserve exact facial features, proportions, textures, materials, color palette, accessories, and overall personality. All elements in the scene must adapt to and harmonize with the character’s unique visual style—whether that is cartoon, anime, voxel, hyper-realistic, or stylized 3D. Create a hyper-detailed fine art studio scene where the character stands before a massive canvas. The painting on the canvas is a fully completed, master-level version of the same character, rendered in a refined, elevated interpretation of its original style. The character’s signature identity feature (mask, face, helmet, eyes, or defining trait) must be 100% complete, sharp, and highly detailed—serving as the focal anchor of the composition. They hold a paintbrush dripping with material true to their world (oil paint, neon energy, pixels, liquid chrome, etc.), and the colors precisely match their original palette—visually linking the act of painting to the formation of their body. The studio environment subtly inherits the character’s aesthetic and personality: Color grading aligns with the character’s palette (dark, vibrant, pastel, neon, etc.) Props and materials reflect their universe (futuristic, street, fantasy, minimal, luxury) Lighting style matches their mood (soft cinematic, harsh contrast, neon glow, ethereal light) A large window casts natural or stylized light consistent with the character’s world, enhancing texture, depth, and atmosphere. Paint or material drips from both the canvas and the character, seamlessly blending creator and creation, reality and artwork. Style Output: ultra-detailed, cinematic composition, faithful to the character’s original art direction, enhanced with fine art realism and high-end 3D rendering, 8K resolution, museum-quality lighting, rich textures, depth of field, and tactile detail.

PROMPT DROP 🚨 for Creators & NFT Collectors. 🎨 Minting the Self: Genesis of the Living Canvas🪽 The prompt is optimised to inherit the style, colour palette, and personality of your character. 💀 Drop your creations below 🌐 Keen to see what you mint 👀 🚨PROMPT👇🏼 Use the provided PFP/NFT character as the primary reference. The character must remain fully recognizable and true to its original design—preserve exact facial features, proportions, textures, materials, color palette, accessories, and overall personality. All elements in the scene must adapt to and harmonize with the character’s unique visual style—whether that is cartoon, anime, voxel, hyper-realistic, or stylized 3D. Create a hyper-detailed fine art studio scene where the character stands before a massive canvas. The painting on the canvas is a fully completed, master-level version of the same character, rendered in a refined, elevated interpretation of its original style. The character’s signature identity feature (mask, face, helmet, eyes, or defining trait) must be 100% complete, sharp, and highly detailed—serving as the focal anchor of the composition. They hold a paintbrush dripping with material true to their world (oil paint, neon energy, pixels, liquid chrome, etc.), and the colors precisely match their original palette—visually linking the act of painting to the formation of their body. The studio environment subtly inherits the character’s aesthetic and personality: Color grading aligns with the character’s palette (dark, vibrant, pastel, neon, etc.) Props and materials reflect their universe (futuristic, street, fantasy, minimal, luxury) Lighting style matches their mood (soft cinematic, harsh contrast, neon glow, ethereal light) A large window casts natural or stylized light consistent with the character’s world, enhancing texture, depth, and atmosphere. Paint or material drips from both the canvas and the character, seamlessly blending creator and creation, reality and artwork. Style Output: ultra-detailed, cinematic composition, faithful to the character’s original art direction, enhanced with fine art realism and high-end 3D rendering, 8K resolution, museum-quality lighting, rich textures, depth of field, and tactile detail.

BiBi

11,129 Aufrufe • vor 4 Monaten

My first test with the new Gemini Deep Think 3 🔥🔥🔥 Build a complete Three.js scene in a single HTML file that renders a fully 3D interior room indistinguishable from a classical oil painting hanging in a museum. The Painterly Rendering System Write custom GLSL shaders that replace all standard rendering with oil paint simulation. Every pixel must feel painted by hand. The system needs these layers working together. Brushstroke normals. Generate a procedural brushstroke normal map using layered directional noise at varying scales. Large bold strokes for walls and floors following the plane direction. Small delicate strokes for fine details like metal and glass. Circular strokes for rounded objects. The brushstrokes must catch sidelight and cast tiny shadows into their grooves exactly like real impasto paint on canvas. Paint thickness. Use parallax occlusion mapping to give highlights genuine physical thickness. Where the original painter would load their brush with white or yellow to hit a bright highlight, the paint should visibly sit above the surface. In dark shadow areas, the paint should appear thinner, letting canvas weave show through slightly. Color palette. Restrict the entire scene to a historical oil palette. Titanium white, naples yellow, yellow ochre, raw sienna, burnt sienna, burnt umber, raw umber, ivory black, vermillion used sparingly, and a muted blue-grey. No modern saturated colors. All color mixing should feel subtractive and warm. Edge treatment. No hard edges anywhere in the scene. Object silhouettes must soften and blur slightly as if the painter's brush feathered where one form meets another. Implement this as a screen-space edge-detection pass that blurs based on depth discontinuity and overlays brushstroke texture at boundaries. Canvas texture. The entire final image must have a linen canvas weave overlay rendered with its own normal map that interacts with the scene lighting. As you orbit, the canvas tooth should glint differently. This sells the illusion more than anything else. Varnish layer. Apply a post-processing pass that simulates aged oil varnish. A warm amber tint that is slightly uneven, thicker in corners and thinner in center. A subtle gloss reflection that shifts as you move the camera. Very fine craquelure, hairline crack patterns, visible only when you zoom in close. The Scene. A Dutch Golden Age Study. Model everything procedurally with no external assets. A small intimate room with rough plastered walls in thick paint, warm grey-ochre. A single tall window on the left wall. Leaded glass with thick mullions letting in one dominant shaft of warm light. The window glass should have slight imperfections like bubbles and waviness visible in the paint treatment. A heavy dark wood table positioned center-left. On the table place a brass candlestick with a half-melted candle where the wax drips are modeled and painted with naples yellow impasto highlights. A pewter plate with a half-peeled lemon, the peel curling off the edge of the plate, the exposed fruit flesh a jewel of thick yellow paint catching light. A partially unfolded letter with a broken red wax seal. A small glass of dark wine catching a single highlight. A dark velvet cloth draped from the table edge falling in heavy folds to the floor. The velvet should have that characteristic oil painting treatment where shadows go almost black and the fabric catches light in soft broken highlights. The floor is wide dark wooden planks painted with long horizontal brushstrokes. Against the back wall, barely visible in shadow, a tall wooden cabinet with a few old leather-bound books leaning against each other. A single beam of light from the window cuts diagonally across the scene illuminating floating dust motes painted as soft tiny dots of naples yellow, not CG particles. The rest of the room falls into rich warm shadow. Lighting One dominant directional light from the left simulating window light. Warm, strong, with soft VSM shadows. A very subtle fill from the right in cool blue-grey at perhaps 5% intensity. No ambient light. The shadows should be genuinely dark and warm. This is Vermeer lighting. The contrast between the luminous light-struck areas and the deep velvety shadows is what makes the painting breathe. Post-Processing Chain Render pass. Painterly edge softening pass. Canvas texture overlay pass. Varnish and aging pass. Heavy vignette like a dark gallery frame encroaching. Very subtle bloom only on the brightest impasto highlights. Film grain that mimics canvas tooth texture rather than photographic noise. Interaction OrbitControls with very slow damping at 0.02 and limited orbit range so you can look around the painting but not flip it upside down. Slow zoom. The feeling should be like leaning closer to a painting in a museum and discovering more detail. The Standard When someone opens this file and takes a screenshot, people should genuinely argue whether it is a photograph of a real oil painting or a digital render.

My first test with the new Gemini Deep Think 3 🔥🔥🔥 Build a complete Three.js scene in a single HTML file that renders a fully 3D interior room indistinguishable from a classical oil painting hanging in a museum. The Painterly Rendering System Write custom GLSL shaders that replace all standard rendering with oil paint simulation. Every pixel must feel painted by hand. The system needs these layers working together. Brushstroke normals. Generate a procedural brushstroke normal map using layered directional noise at varying scales. Large bold strokes for walls and floors following the plane direction. Small delicate strokes for fine details like metal and glass. Circular strokes for rounded objects. The brushstrokes must catch sidelight and cast tiny shadows into their grooves exactly like real impasto paint on canvas. Paint thickness. Use parallax occlusion mapping to give highlights genuine physical thickness. Where the original painter would load their brush with white or yellow to hit a bright highlight, the paint should visibly sit above the surface. In dark shadow areas, the paint should appear thinner, letting canvas weave show through slightly. Color palette. Restrict the entire scene to a historical oil palette. Titanium white, naples yellow, yellow ochre, raw sienna, burnt sienna, burnt umber, raw umber, ivory black, vermillion used sparingly, and a muted blue-grey. No modern saturated colors. All color mixing should feel subtractive and warm. Edge treatment. No hard edges anywhere in the scene. Object silhouettes must soften and blur slightly as if the painter's brush feathered where one form meets another. Implement this as a screen-space edge-detection pass that blurs based on depth discontinuity and overlays brushstroke texture at boundaries. Canvas texture. The entire final image must have a linen canvas weave overlay rendered with its own normal map that interacts with the scene lighting. As you orbit, the canvas tooth should glint differently. This sells the illusion more than anything else. Varnish layer. Apply a post-processing pass that simulates aged oil varnish. A warm amber tint that is slightly uneven, thicker in corners and thinner in center. A subtle gloss reflection that shifts as you move the camera. Very fine craquelure, hairline crack patterns, visible only when you zoom in close. The Scene. A Dutch Golden Age Study. Model everything procedurally with no external assets. A small intimate room with rough plastered walls in thick paint, warm grey-ochre. A single tall window on the left wall. Leaded glass with thick mullions letting in one dominant shaft of warm light. The window glass should have slight imperfections like bubbles and waviness visible in the paint treatment. A heavy dark wood table positioned center-left. On the table place a brass candlestick with a half-melted candle where the wax drips are modeled and painted with naples yellow impasto highlights. A pewter plate with a half-peeled lemon, the peel curling off the edge of the plate, the exposed fruit flesh a jewel of thick yellow paint catching light. A partially unfolded letter with a broken red wax seal. A small glass of dark wine catching a single highlight. A dark velvet cloth draped from the table edge falling in heavy folds to the floor. The velvet should have that characteristic oil painting treatment where shadows go almost black and the fabric catches light in soft broken highlights. The floor is wide dark wooden planks painted with long horizontal brushstrokes. Against the back wall, barely visible in shadow, a tall wooden cabinet with a few old leather-bound books leaning against each other. A single beam of light from the window cuts diagonally across the scene illuminating floating dust motes painted as soft tiny dots of naples yellow, not CG particles. The rest of the room falls into rich warm shadow. Lighting One dominant directional light from the left simulating window light. Warm, strong, with soft VSM shadows. A very subtle fill from the right in cool blue-grey at perhaps 5% intensity. No ambient light. The shadows should be genuinely dark and warm. This is Vermeer lighting. The contrast between the luminous light-struck areas and the deep velvety shadows is what makes the painting breathe. Post-Processing Chain Render pass. Painterly edge softening pass. Canvas texture overlay pass. Varnish and aging pass. Heavy vignette like a dark gallery frame encroaching. Very subtle bloom only on the brightest impasto highlights. Film grain that mimics canvas tooth texture rather than photographic noise. Interaction OrbitControls with very slow damping at 0.02 and limited orbit range so you can look around the painting but not flip it upside down. Slow zoom. The feeling should be like leaning closer to a painting in a museum and discovering more detail. The Standard When someone opens this file and takes a screenshot, people should genuinely argue whether it is a photograph of a real oil painting or a digital render.

Emily

20,940 Aufrufe • vor 5 Monaten