Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Interactive "knob" component with different configs for each CSS filter. • sensible default value • pixel values based on user nudge preferences • ±10% shift nudge for percentage values, ±15° for degrees • round to nearest step when holding ⇧

Hugo

9,460 subscribers

11,586 views • 1 month ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

14 Comments

jhey ʕ•ᴥ•ʔ1 month ago

nice - i been messin' with a similar dial/knob opting for a dot, but with similar behavior like you have matching DevTools for the nudging 😎 these kinda controls are so satisfying to build 🤓

Hugo1 month ago

Ohhh a dot instead of segment/tick would look great!

jhey ʕ•ᴥ•ʔ1 month ago

i should def finish it – it's a '26 refresh lol i picked it up again after recently trying to curate lots of old demos and finally making it back to 2019 😄

standard deviation1 month ago

VST plugin vibes

Aaron1 month ago

clean

Igor bedesqui1 month ago

nice

Will King1 month ago

Oh this is so good

lefty.v01 month ago

Would love to build this omg this looks so much fun

Katarina Stefanikova1 month ago

🔥

Markiian1 month ago

That’s a good one. How does it fill to roll it?

Hugo1 month ago

Feels great! You actually get a horizontal scrubbing cursor that expands slightly on mouse press, and you cursor stays at that spot when scrubbing.

Markiian1 month ago

yes, that's it man. Great stuffQ

Joe Lee1 month ago

do you have data on whether users prefer to tune these with dragging vs typing? always been curious

Hugo1 month ago

I don't have the data available! I imagine for things that aren't strictly "numerical" like spacing or border-radius for instance, typing makes more sense. But for filters and similar "graphic" properties, dragging can be nice!

Related Videos

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 views • 2 years ago

Jensen Huang says computing is no longer pre-recorded or pre-compiled. Traditional software like Excel ran the same for everyone now AI adapts to each user and moment. Every sound, pixel, and output is generated in real time based on context. This requires massively more compute, as software now thinks before it responds. It marks a fundamental shift: software isn’t static—it’s alive and reactive.

Jensen Huang says computing is no longer pre-recorded or pre-compiled. Traditional software like Excel ran the same for everyone now AI adapts to each user and moment. Every sound, pixel, and output is generated in real time based on context. This requires massively more compute, as software now thinks before it responds. It marks a fundamental shift: software isn’t static—it’s alive and reactive.

Wes Roth

24,404 views • 7 months ago

Step 3: Develop an Independent and Balanced View on Feminism Goal: Build your own beliefs based on respect, critical thinking, and independence. Action 1: Educate Yourself - Read balanced materials from both feminist and non-feminist perspectives to develop an informed stance. - Engage in meaningful conversations with people who challenge your thinking, rather than blindly accepting any one ideology. Action 2: Develop Core Values - Identify your core values (e.g., respect, fairness) and use them as a basis for evaluating issues. - Ensure your values are based on principles that serve your goals and strengthen your character. Outcome: You will develop an independent, balanced worldview that respects both men and women while maintaining personal integrity.

Step 3: Develop an Independent and Balanced View on Feminism Goal: Build your own beliefs based on respect, critical thinking, and independence. Action 1: Educate Yourself - Read balanced materials from both feminist and non-feminist perspectives to develop an informed stance. - Engage in meaningful conversations with people who challenge your thinking, rather than blindly accepting any one ideology. Action 2: Develop Core Values - Identify your core values (e.g., respect, fairness) and use them as a basis for evaluating issues. - Ensure your values are based on principles that serve your goals and strengthen your character. Outcome: You will develop an independent, balanced worldview that respects both men and women while maintaining personal integrity.

Man’s Bible⚡️

20,313 views • 1 year ago

I went to CPAC expecting America First and unapologetic faith. What I saw was something different. More foreign flags than American ones. A message that didn’t reflect the values it claims to stand for. So I did what I had to do. I went backstage. I confronted leadership. And I walked out. This isn’t on anyone I was with that was my decision alone. My convictions aren’t for sale, and I won’t pretend when something feels off. If we’re going to say “America First” and stand on Christian values… then it needs to actually look like it. I’ll stand on that. 🇺🇸

I went to CPAC expecting America First and unapologetic faith. What I saw was something different. More foreign flags than American ones. A message that didn’t reflect the values it claims to stand for. So I did what I had to do. I went backstage. I confronted leadership. And I walked out. This isn’t on anyone I was with that was my decision alone. My convictions aren’t for sale, and I won’t pretend when something feels off. If we’re going to say “America First” and stand on Christian values… then it needs to actually look like it. I’ll stand on that. 🇺🇸

The Patriots Prayer Network

479,019 views • 5 months ago

The key point: Importers have the legal option to deconsolidate their cargo and pay based on the value of their specific items. An importer also has the right to have their own goods assessed individually. In this video, KRA Board Chairman explains: 1. Why KSh3.2M is not the value of every container 2. How consolidated cargo works for small traders 3. The option to deconsolidate and have goods individually assessed 4. Why verification matters when actual cargo values differ 5. Why accurate declaration is important for fair trade #FairTradeForAll

The key point: Importers have the legal option to deconsolidate their cargo and pay based on the value of their specific items. An importer also has the right to have their own goods assessed individually. In this video, KRA Board Chairman explains: 1. Why KSh3.2M is not the value of every container 2. How consolidated cargo works for small traders 3. The option to deconsolidate and have goods individually assessed 4. Why verification matters when actual cargo values differ 5. Why accurate declaration is important for fair trade #FairTradeForAll

Kenya Revenue Authority

15,557 views • 10 days ago

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇

Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

284,005 views • 3 years ago

A war is on. Fragile markets. For equity analysts or for anyone with interest this is great value. Check how rich is the output in the video. Go to Perplexity Computer. Use this prompt: Build an interactive scenario dashboard to help me explore and understand the different ways the US/Israel strike and potential ongoing conflict on Iran will impact global public equity markets in the coming weeks - consider the impact on individual equities and commodities The site showcases 3 scenarios of how the conflict might go and adjusts values such as oil price ranges, sector impact, and risk indicators. Includes a visual flowchart showing how the Hormuz disrptuion cascades through oil price to airline costs, inflation risk, energy revenue based on time and conflict levels.

A war is on. Fragile markets. For equity analysts or for anyone with interest this is great value. Check how rich is the output in the video. Go to Perplexity Computer. Use this prompt: Build an interactive scenario dashboard to help me explore and understand the different ways the US/Israel strike and potential ongoing conflict on Iran will impact global public equity markets in the coming weeks - consider the impact on individual equities and commodities The site showcases 3 scenarios of how the conflict might go and adjusts values such as oil price ranges, sector impact, and risk indicators. Includes a visual flowchart showing how the Hormuz disrptuion cascades through oil price to airline costs, inflation risk, energy revenue based on time and conflict levels.

Gabbar

105,865 views • 6 months ago

Little demo of Kick Pals for . -When a user sends a message. A character is spawned. There is 13 different characters that spawn -Characters will roam around the bottom of the screen and attack each other -Character life span is based on a pre-set timer. Each time that user chats, their timer resets. Thus making their character live longer. If the character "timer" hits zero. That character will die. -Toggleable option to have the their character slightly grow in size each message -Works with Kick, Twitch, AND TikTok!

Little demo of Kick Pals for . -When a user sends a message. A character is spawned. There is 13 different characters that spawn -Characters will roam around the bottom of the screen and attack each other -Character life span is based on a pre-set timer. Each time that user chats, their timer resets. Thus making their character live longer. If the character "timer" hits zero. That character will die. -Toggleable option to have the their character slightly grow in size each message -Works with Kick, Twitch, AND TikTok!

MrBoost

15,385 views • 2 years ago

today on a call with se i learnt that fomo does not use AI to automate their daily notifications and they actually do their daily digest by hand. allegedly due to the heavy nuance of markets data. so here's my public pitch for clawpump to undertake this solvable problem, which we solved for 10K users and have informed over $120M of trading volume. our agents auto-learn by default, the more our builders or traders use our platform, they solidify lessons on procedure for trading and permissions based on markets, preferences, style of questions, and levered tools they engage with such that they improve daily. we've solved this issue on a scalable manner for each individual user. we can reuse this same market data for: - Daily Digests of Market Conditions - Agentic Token Summaries/Token Information - Personalized Daily Summaries for all fomo users (which we have live on production at clawpump) would love to chat. feel free to DM me :)

today on a call with se i learnt that fomo does not use AI to automate their daily notifications and they actually do their daily digest by hand. allegedly due to the heavy nuance of markets data. so here's my public pitch for clawpump to undertake this solvable problem, which we solved for 10K users and have informed over $120M of trading volume. our agents auto-learn by default, the more our builders or traders use our platform, they solidify lessons on procedure for trading and permissions based on markets, preferences, style of questions, and levered tools they engage with such that they improve daily. we've solved this issue on a scalable manner for each individual user. we can reuse this same market data for: - Daily Digests of Market Conditions - Agentic Token Summaries/Token Information - Personalized Daily Summaries for all fomo users (which we have live on production at clawpump) would love to chat. feel free to DM me :)

bunny

12,158 views • 1 month ago

Live now. Full step-by-step tutorial for getting REAL pixel art game sprites with AI No more MIXELS! > GPT Image 2.0 > Pixel Snapper by SpriteFusion > Codex w/ GPT 5.5 High > Phaser 4 Also how I solve other annoying bugs with AI generated sprites. Prompts + more in reply👇 00:00 Intro 01:24 Overview of what we're building 02:42 Pick any AI tool 04:29 Problem 1: Fake pixels or 'mixels' 04:53 Problem 2: Frame Bleeds 05:39 Problem 3: Frame Drifts 06:21 Step 1: Generate a reference image 07:53 Step 2: Pixel Snap to Anchor 13:02 Step 3: Generate West-facing anchor 14:45 Step 4: Pixel snap (again!) 15:46 Step 5: Generating animation spritesheets 19:27 Steo 6: Recovering Frames 20:25 Step 7: Curating Frames 21:33 Step 8: Pixel Snap Each Frame 22:08 Step 9: Anchoring Frames 23:40 Step 10: Normalise and combine 26:28 Wrap up

Live now. Full step-by-step tutorial for getting REAL pixel art game sprites with AI No more MIXELS! > GPT Image 2.0 > Pixel Snapper by SpriteFusion > Codex w/ GPT 5.5 High > Phaser 4 Also how I solve other annoying bugs with AI generated sprites. Prompts + more in reply👇 00:00 Intro 01:24 Overview of what we're building 02:42 Pick any AI tool 04:29 Problem 1: Fake pixels or 'mixels' 04:53 Problem 2: Frame Bleeds 05:39 Problem 3: Frame Drifts 06:21 Step 1: Generate a reference image 07:53 Step 2: Pixel Snap to Anchor 13:02 Step 3: Generate West-facing anchor 14:45 Step 4: Pixel snap (again!) 15:46 Step 5: Generating animation spritesheets 19:27 Steo 6: Recovering Frames 20:25 Step 7: Curating Frames 21:33 Step 8: Pixel Snap Each Frame 22:08 Step 9: Anchoring Frames 23:40 Step 10: Normalise and combine 26:28 Wrap up

Chong-U

34,568 views • 4 months ago

🚨🇬🇧 BREAKING: UK PM Keir Starmer outlines major shift toward closer EU ties: Says Brexit caused serious damage to the UK economy, Plans a new summit with EU partners in coming weeks UK will go beyond previous commitments Push for closer economic cooperation to ease cost of living Push for stronger security cooperation Calls for a deeper long-term partnership based on shared values, interests, and future Says this is needed to navigate a more dangerous global situation Emphasizes all decisions will be guided by the interests of the British people.

🚨🇬🇧 BREAKING: UK PM Keir Starmer outlines major shift toward closer EU ties: Says Brexit caused serious damage to the UK economy, Plans a new summit with EU partners in coming weeks UK will go beyond previous commitments Push for closer economic cooperation to ease cost of living Push for stronger security cooperation Calls for a deeper long-term partnership based on shared values, interests, and future Says this is needed to navigate a more dangerous global situation Emphasizes all decisions will be guided by the interests of the British people.

Globe Observer

40,231 views • 5 months ago

Grok 4 prompt to generate the video's generative art: You are an expert P5.js developer with expertise in generative art, mathematics (vector fields, Perlin noise), and aesthetic design. Create a visually stunning, interactive particle flow field sketch that mimics ethereal, fluid dynamics with glowing trails and cosmic vibes. Key Features to Implement Exactly: Use P5.js via CDN (version 1.4.0). 1500 particles with random positions and sizes (1-4 pixels). Flow field via multi-layered Perlin noise: base noise + 0.5 * octave at 2x scale, using 3D noise with zOff incrementing by 0.002 per frame; noiseScale = 0.005. Particle physics: Vectors for pos, vel, acc; maxSpeed = 3; force mult 0.15. Dynamic colors: 5-color palette in HSV, baseHue = (frameCount * 0.1) % 360, each hue offset by 72 (pentadic), saturation 80, value 100, alpha 8; update in draw(). Interactivity: Mouse press attracts particles with normalized vector force, strength 0.05 * (1 / (dist + 1)). Aesthetics: Additive blendMode(ADD); noStroke; background fade fill(0,5) rect over canvas; variable sizes for depth. Utilities: Edge wrapping in Particle class; windowResized to resize canvas and reset background. Comments: Explain enhancements (time-based colors, mouse interaction, layered noise, trails), math (vector attraction, multi-octave noise). Step-by-Step Reasoning for Your Response: Analyze: Dissect user intent for aesthetics (glowing, dynamic, interactive) and math (noise layers, forces). Plan Code: setup() for init (canvas full window, particles, placeholders); draw() for fade, color update, zOff++, particle loop; Particle class with constructor, update (noise angle, force, mouse attract, physics), display, edges. Implement: Write modular, readable code with exact values; ensure performance. Verify: Mentally run: Particles flow smoothly, colors cycle, mouse pulls inversely, no errors on resize/edges. Enhance Output: Rate aesthetics/correctness (target 9.5/10); suggest tweaks (e.g., numParticles for perf). Output Structure: Full HTML with for P5.js code. Explanation: Brief on visuals/math/customizations/running.

Grok 4 prompt to generate the video's generative art: You are an expert P5.js developer with expertise in generative art, mathematics (vector fields, Perlin noise), and aesthetic design. Create a visually stunning, interactive particle flow field sketch that mimics ethereal, fluid dynamics with glowing trails and cosmic vibes. Key Features to Implement Exactly: Use P5.js via CDN (version 1.4.0). 1500 particles with random positions and sizes (1-4 pixels). Flow field via multi-layered Perlin noise: base noise + 0.5 * octave at 2x scale, using 3D noise with zOff incrementing by 0.002 per frame; noiseScale = 0.005. Particle physics: Vectors for pos, vel, acc; maxSpeed = 3; force mult 0.15. Dynamic colors: 5-color palette in HSV, baseHue = (frameCount * 0.1) % 360, each hue offset by 72 (pentadic), saturation 80, value 100, alpha 8; update in draw(). Interactivity: Mouse press attracts particles with normalized vector force, strength 0.05 * (1 / (dist + 1)). Aesthetics: Additive blendMode(ADD); noStroke; background fade fill(0,5) rect over canvas; variable sizes for depth. Utilities: Edge wrapping in Particle class; windowResized to resize canvas and reset background. Comments: Explain enhancements (time-based colors, mouse interaction, layered noise, trails), math (vector attraction, multi-octave noise). Step-by-Step Reasoning for Your Response: Analyze: Dissect user intent for aesthetics (glowing, dynamic, interactive) and math (noise layers, forces). Plan Code: setup() for init (canvas full window, particles, placeholders); draw() for fade, color update, zOff++, particle loop; Particle class with constructor, update (noise angle, force, mouse attract, physics), display, edges. Implement: Write modular, readable code with exact values; ensure performance. Verify: Mentally run: Particles flow smoothly, colors cycle, mouse pulls inversely, no errors on resize/edges. Enhance Output: Rate aesthetics/correctness (target 9.5/10); suggest tweaks (e.g., numParticles for perf). Output Structure: Full HTML with for P5.js code. Explanation: Brief on visuals/math/customizations/running.

tetsuo

44,518 views • 9 months ago

How will autonomous AI agents shape the future of Ethereum? In Episode 20 of the Agents Unleashed podcast, maybrier ☴ talks with Tomasz K. Stańczak, Co-Executive Director of the Ethereum Foundation, about Ethereum’s next decade and the rise of agentic AI, both on and off-chain. In this episode: • Strategic priorities for Ethereum’s next upgrades • Why cypherpunk values like privacy + decentralization still matter • How AI agents could use Ethereum as their coordination + verification layer • What “identity is defined by privacy” really means in an AI world 02:05 – Tomasz on his role at Ethereum Foundation 04:21 – What about Ethereum’s mission resonated with him 06:48 – The Foundation's strategic priorities for AI 10:09 – Keeping cypherpunk values alive 15:34 – The next 10 years: AI, robotics, and blockchain 20:55 – Identity, privacy, and AI agents 26:30 – Predictions for the future of the AI user interface 31:36 – Call to action for builders This episode is sponsored by Sigil Fund

How will autonomous AI agents shape the future of Ethereum? In Episode 20 of the Agents Unleashed podcast, maybrier ☴ talks with Tomasz K. Stańczak, Co-Executive Director of the Ethereum Foundation, about Ethereum’s next decade and the rise of agentic AI, both on and off-chain. In this episode: • Strategic priorities for Ethereum’s next upgrades • Why cypherpunk values like privacy + decentralization still matter • How AI agents could use Ethereum as their coordination + verification layer • What “identity is defined by privacy” really means in an AI world 02:05 – Tomasz on his role at Ethereum Foundation 04:21 – What about Ethereum’s mission resonated with him 06:48 – The Foundation's strategic priorities for AI 10:09 – Keeping cypherpunk values alive 15:34 – The next 10 years: AI, robotics, and blockchain 20:55 – Identity, privacy, and AI agents 26:30 – Predictions for the future of the AI user interface 31:36 – Call to action for builders This episode is sponsored by Sigil Fund

Olas (formerly Autonolas)

17,462 views • 1 year ago

HERMES AGENT WITHOUT THESE 3 FILES IS A CHATBOT. WITH THEM IT KNOWS WHO IT IS, WHO YOU ARE, AND WHAT IT LEARNED. SOUL.md — who the agent is. first thing in the system prompt. defines personality, voice, values, how it operates, what it can and can't do. structure yours like this: → identity (name, role, relationship to you) → values (what matters, what principles guide decisions) → voice (how it communicates, tone, style) → operations (autonomy level, ground rules) → restrictions (what it never does) → failure protocol (how to operate when things break) lives in ~/.hermes/SOUL.md. auto-seeded on first install. edit anytime. scanned for prompt injection on every load. keep it concise. SOUL.md injects into every turn. a 200-line soul burns tokens on every message. aim for 50-80 lines. one paragraph per section. MEMORY.md — what the agent remembers. persistent facts, insights, preferences. survives across sessions and restarts. capped at ~800 tokens by default: memory: memory_char_limit: 2200 the agent writes to this automatically as it learns about your work. USER.md — who you are. your profile, preferences, context. capped at ~500 tokens by default: memory: user_char_limit: 1375 injected every turn so the agent always knows who it's working for. bonus: AGENTS.md — project-specific instructions. drop one in any project folder. subdirectory AGENTS.md files load lazily during tool calls, not at startup. keeps your system prompt light. prompt stack order on every turn: SOUL.md → tool guidance → MEMORY.md + USER.md → skills index → AGENTS.md → platform hints skills come preloaded. 60+ built-in tools. the agent creates more skills from completed work. you focus on these 3 files. each profile gets its own copy: ~/.hermes/SOUL.md (default profile) ~/.hermes/profiles/researcher/SOUL.md ~/.hermes/profiles/ops/SOUL.md different agent, different soul, different memory, same machine. full breakdown of Hermes as a Personal AI OS in the article 👇

YanXbt

28,924 views • 3 months ago

George Kamel reveals why Caleb Hammer will NOT be replacing Ken Coleman on The Ramsey Show… “I think Caleb and Dave are so at odds with their principles, their values, their faith, the way that they carry themselves, their mission, their goals, that it wouldn't even make sense.” “I would say the, the cussing. It’s not family-friendly. We have a set of values that are, are faith-based that I think would be jarring for Caleb to then, like, adhere to or grapple with in this building.” “To work here, you have to have a similar like-mind, similar values, and Caleb just doesn't have those. It’s not a knock against Caleb, but, you know, we don't have that, that type of content around here and we have a different mission.”

George Kamel reveals why Caleb Hammer will NOT be replacing Ken Coleman on The Ramsey Show… “I think Caleb and Dave are so at odds with their principles, their values, their faith, the way that they carry themselves, their mission, their goals, that it wouldn't even make sense.” “I would say the, the cussing. It’s not family-friendly. We have a set of values that are, are faith-based that I think would be jarring for Caleb to then, like, adhere to or grapple with in this building.” “To work here, you have to have a similar like-mind, similar values, and Caleb just doesn't have those. It’s not a knock against Caleb, but, you know, we don't have that, that type of content around here and we have a different mission.”

The Iced Coffee Hour

354,272 views • 4 months ago

The changes in the Algo and what Elon is truly trying to do - here is the full breakdown. A couple of Quick Points: - It all represents a really significant shift in what we’re about to see in our feed and the overall experience on X. - The shift from reply guy tactics to authenticity is where it’s all headed. - The value of a post will not be defined by engagement in its entirety but by the native value of the content. Current State: - Content visibility, including posts and replies, is currently unevenly prioritized, with manually written heuristics favoring recommendations to followers, benefitting large accounts but limiting the reach of smaller ones. - The "For You" algo heavily relies on these heuristics - impacting content reach and potentially hindering smaller accounts, regardless of content quality. Proposed Changes: - Algo defined value assignment to content will be driven by End-to-End Architecture based AI. - User-specific vectors, representing preferences, will guide content prioritization, providing a refreshed user experience within the feed that is inclusive and personalized. - The new approach will promote quality content across the entire user base, irrespective of account size. Additional Insights: - Elon emphasizes that AI will play a pivotal role in content importance assignment, suggesting a departure from the current manually-driven processes. - The algo will differentiate between content from accounts users follow (non-AI recommended) and those they don't (AI recommended), which should significantly improve the diversity of the content we’re exposed to. Implications: The proposed changes signify a fundamental transformation in how content is presented and recommended, with a move towards a more democratic and AI-driven system. Smaller accounts may benefit from increased visibility, creating a more level playing field based on content quality rather than follower count. Theories: - The mention of AI-differentiated recommendations for followed and non-followed content suggests a strategic effort to broaden user exposure to diverse content. - The shift towards an AI-powered recommendation system indicates a commitment to enhancing user experience by tailoring content suggestions based on individual preferences. What we’re looking at is a change that finally addresses the FOMO dynamic between accounts with reach and truly compelling content. It will be a major chance for new accounts, small accounts, and anyone really - to advance into the greater ecosphere they were left out of before. Goodbye, reply guy. Hello, value adding content. These conclusions are based on the recent interview of Elon Musk by Lex Fridman.

The changes in the Algo and what Elon is truly trying to do - here is the full breakdown. A couple of Quick Points: - It all represents a really significant shift in what we’re about to see in our feed and the overall experience on X. - The shift from reply guy tactics to authenticity is where it’s all headed. - The value of a post will not be defined by engagement in its entirety but by the native value of the content. Current State: - Content visibility, including posts and replies, is currently unevenly prioritized, with manually written heuristics favoring recommendations to followers, benefitting large accounts but limiting the reach of smaller ones. - The "For You" algo heavily relies on these heuristics - impacting content reach and potentially hindering smaller accounts, regardless of content quality. Proposed Changes: - Algo defined value assignment to content will be driven by End-to-End Architecture based AI. - User-specific vectors, representing preferences, will guide content prioritization, providing a refreshed user experience within the feed that is inclusive and personalized. - The new approach will promote quality content across the entire user base, irrespective of account size. Additional Insights: - Elon emphasizes that AI will play a pivotal role in content importance assignment, suggesting a departure from the current manually-driven processes. - The algo will differentiate between content from accounts users follow (non-AI recommended) and those they don't (AI recommended), which should significantly improve the diversity of the content we’re exposed to. Implications: The proposed changes signify a fundamental transformation in how content is presented and recommended, with a move towards a more democratic and AI-driven system. Smaller accounts may benefit from increased visibility, creating a more level playing field based on content quality rather than follower count. Theories: - The mention of AI-differentiated recommendations for followed and non-followed content suggests a strategic effort to broaden user exposure to diverse content. - The shift towards an AI-powered recommendation system indicates a commitment to enhancing user experience by tailoring content suggestions based on individual preferences. What we’re looking at is a change that finally addresses the FOMO dynamic between accounts with reach and truly compelling content. It will be a major chance for new accounts, small accounts, and anyone really - to advance into the greater ecosphere they were left out of before. Goodbye, reply guy. Hello, value adding content. These conclusions are based on the recent interview of Elon Musk by Lex Fridman.

Adrian Dittmann

313,553 views • 2 years ago

$CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @property --value { inherits: true; initial-value: 0; syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .control__label { counter-reset: low var(--value) high calc(100 - var(--value)); } .control__label::before { content: "COFFEE " counter(low) "%"; } .control__label::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .control__track::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @property --shift { initial-value: 0; inherits: true; syntax: ' '; } @keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇$

CSS Tip! 🤯 You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀 ::-webkit-slider-thumb { view-timeline: --thumb inline; } Scroll animation driven by the slider thumb animates a number between the "min" and "max" of the range 😅 @property --value { inherits: true; initial-value: 0; syntax: ' '; } @keyframes sync { to { --value: 100; }} Tie that up to the contain animation-range ⚡️ .control { animation: sync both linear reverse; animation-timeline: --thumb; animation-range: contain; } Hoist the view timeline so all the parts of the control can use it! .control { timeline-scope: --thumb; } Use that value in a counter which is used for the labels. Create a low and a high for each side 😇 .controllabel { counter-reset: low var(--value) high calc(100 - var(--value)); } .controllabel::before { content: "COFFEE " counter(low) "%"; } .controllabel::after { content: counter(high) "% MILK"; } That's the magic of updating the label values ✨ For the big track, it's a fake track. You can make use of the same --value property and do some calc() to work out the width of each part. .controltrack::before { width: calc(var(--value) * 1% - 0.5rem); background: var(--coffee); border-radius: 4px; transition: width 0.1s; } The width leaves a little gap for the indicator piece 🤙 The color calculation for --coffee isn't too wild but again you can use the same --value .control__track { --coffee: hsl(24 74% calc( 24% + (30% * ((100 - var(--value, 0)) / 100)) / 1 ) / 0.4); } Now for the last piece. Making the track change height. You could set up another custom property and animate its value using the --thumb timeline too 🔥 @property --shift { initial-value: 0; inherits: true; syntax: ' '; } @keyframes shift { 0%, 31%, 61%, 100% { --shift: 0; } 32%, 60% { --shift: 1; } } Then use that --shift to update the translation of the label and height of the track 🤓 .label { transform: translateY(calc(var(--shift) * 50%)); transition: transform var(--speed) var(--timing); } Cool part here is that you can use the control to work out the @keyframes percentages 😅 Oh. And the timing for that little bounce? Use the linear() function 😎 :root { --timing: linear( 0, 0.5007 7.21%, 0.7803 12.29%, 0.8883 14.93%, 0.9724 17.63%, 1.0343 20.44%, 1.0754 23.44%, 1.0898 25.22%, 1.0984 27.11%, 1.1014 29.15%, 1.0989 31.4%, 1.0854 35.23%, 1.0196 48.86%, 1.0043 54.06%, 0.9956 59.6%, 0.9925 68.11%, 1 ); } Should probably do a video on this one. Lots of little custom property tricks for sure! 💯 It's not too far off the range slider with the tooltip that came up previously As always, any questions, let me know! Also, this one only works in Chrome currently ✅🥲 This one's a bit rocket science ha 🚀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

377,871 views • 2 years ago