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.

While designers use Figma, I create cinematic experiences with CSS 🎬🧑‍💻 Meet Mr. Polygon, a geometric, animated portrait made entirely with HTML & CSS 🔥 Inspired by Mannie Live Demo: GitHub: Show some love 🤲🏽💙

Ezekiel 🕸️

3,036 subscribers

21,614 Aufrufe • vor 10 Monaten •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

27 Kommentare

Profilbild von Atom the UiUx Designer

Atom the UiUx Designervor 10 Monaten

@Manniegraphics_ Bravo. Amazing work

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ Thank you 🙏🏽

Profilbild von Ifeoluwa

Ifeoluwavor 10 Monaten

@Manniegraphics_ This is dope 😎 Welldone sir 🫡

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@IF3OLUWA25 @Manniegraphics_ Thank you 🙏🏽

Profilbild von Limitless | Graphic designer

Limitless | Graphic designervor 10 Monaten

@Manniegraphics_ Damnn👌

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ 🤲🏽🤲🏽

Profilbild von do0ofan

do0ofanvor 10 Monaten

@Manniegraphics_ 🔥🔥🔥woah wth

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ 🫠🫠

Profilbild von Ibrahim || Designer

Ibrahim || Designervor 10 Monaten

@Manniegraphics_ Awesome 🙌🏼🔥 I was going to follow you then realised I was already following you.

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ Hehehe 😅 Thank you 🙏🏽

Profilbild von Lexi con 🧃

Lexi con 🧃vor 10 Monaten

@Manniegraphics_ Nice work boss

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ Thank you 🙏🏽

Profilbild von Traffy 🍙

Traffy 🍙vor 10 Monaten

@Manniegraphics_ I love Design Engineers sm Crazy stuff man 🔥

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ Thank you so much 🥹🤲🏽

Profilbild von dr.design

dr.designvor 10 Monaten

@Manniegraphics_ Nice work. Audio reference?

Profilbild von Ezekiel 🕸️

Ezekiel 🕸️vor 10 Monaten

@Manniegraphics_ Thank you. supwel - another vibe

Profilbild von Melissa

Melissavor 10 Monaten

@Manniegraphics_ Nailed it with the eye movements 🌹

Profilbild von zik

zikvor 10 Monaten

@Manniegraphics_ Una dey shame pesin o

Profilbild von Khlaseek designer

Khlaseek designervor 10 Monaten

@Manniegraphics_ Amazing work 🚀💯

Profilbild von Mavisdesigns

Mavisdesignsvor 10 Monaten

@Manniegraphics_ Amazing 🔥🔥

Profilbild von Angel Batubo | Designer

Angel Batubo | Designervor 10 Monaten

@Manniegraphics_ Oh wow! This is amazing.

Profilbild von AnoRak

AnoRakvor 10 Monaten

@Manniegraphics_ This is really amazing 🤜🏾, cool stuff. How can I learn to do something like this with CSS?

Profilbild von Olabanks | Software Engineer🚀

Olabanks | Software Engineer🚀vor 10 Monaten

@Manniegraphics_ This is amazing 👏

Profilbild von Andrew Daniel Kingston

Andrew Daniel Kingstonvor 10 Monaten

@Manniegraphics_ Too solid man, I just followed!

Profilbild von TKD

TKDvor 10 Monaten

@Manniegraphics_ Nothing like pity devs o. html and css?!!!! Nice work

Profilbild von Chris Nwabueze | UIUX & Front-end Engineer 🎨🖋️

Chris Nwabueze | UIUX & Front-end Engineer 🎨🖋️vor 10 Monaten

@Manniegraphics_ Bruuuhhhh🚀🚀🚀

Profilbild von Ngozi • UI/UX🪐

Ngozi • UI/UX🪐vor 10 Monaten

@Manniegraphics_ amazing!

Ähnliche Videos

Adobe tried to buy Figma for $20 billion in 2022. The deal collapsed. So Figma went public on the NYSE in July 2025 instead. Ticker FIG. Public company. Quarterly earnings. Wall Street pressure. You know what happens to design tools after they IPO. In March 2025, Figma raised the Professional Full seat 33%. From $15 to $20 a month. Organization seats jumped to $55. Enterprise to $90. Then they took Dev Mode, which was free during beta, and locked it behind a paid seat. Your developers now pay extra to inspect the designs your designers already paid to create. In March 2026, Figma started charging for AI credits on top. If Figma raises prices again, you pay. If Figma gets acquired, you pray. If Figma shuts down, your files die with it. Your design system. On their servers. In a proprietary format only their app can read. To draw rectangles on a screen. There is an open source design platform that runs on your hardware. Stores your files in plain SVG. Costs $0 forever for unlimited users. It is called Penpot. 45,700+ stars on GitHub. A full Figma-grade design platform built on open web standards. Vector editing. Components. Design tokens to W3C spec. Flex and Grid layouts. Real-time multiplayer. Interactive prototyping. Here's what it does: → Real-time collaboration. Live cursors. Comments in line. → Components, variants, shared libraries. → Auto layout, Flex, CSS Grid. The tool outputs production CSS, not lookalike CSS. → Interactive prototypes with overlays, animations, and flows. → Inspect tab. Free. Built in. Every developer grabs production CSS, SVG, HTML without a separate seat. → Plugin ecosystem. Figma import to migrate your files. → Self-host on Docker in one command. Your designs never leave your network. Here's the wildest part: Figma stores your designs in a proprietary format only Figma can read. Penpot files are SVG. The same format your browser has rendered for 25 years. Open them in any editor. Open them in 20 years. Nobody can lock you out. The feature Figma charges your developers extra for, Penpot gives away. Without asking permission. Figma Professional: $20/month per seat. A 10-person team: $2,400/year. Figma Organization: $55/month per Full seat. A 50-person org: $33,000/year. Penpot: $0. Unlimited users. Unlimited files. Unlimited teams. Self-hosted. Free forever. 45,700+ stars. 2,700+ forks. 250+ contributors. MPL-2.0 license. Backed by a community that believes design tools should be free. Your designs. Your files. Your standards. 100% Open Source. (Link in the comments)

Adobe tried to buy Figma for $20 billion in 2022. The deal collapsed. So Figma went public on the NYSE in July 2025 instead. Ticker FIG. Public company. Quarterly earnings. Wall Street pressure. You know what happens to design tools after they IPO. In March 2025, Figma raised the Professional Full seat 33%. From $15 to $20 a month. Organization seats jumped to $55. Enterprise to $90. Then they took Dev Mode, which was free during beta, and locked it behind a paid seat. Your developers now pay extra to inspect the designs your designers already paid to create. In March 2026, Figma started charging for AI credits on top. If Figma raises prices again, you pay. If Figma gets acquired, you pray. If Figma shuts down, your files die with it. Your design system. On their servers. In a proprietary format only their app can read. To draw rectangles on a screen. There is an open source design platform that runs on your hardware. Stores your files in plain SVG. Costs $0 forever for unlimited users. It is called Penpot. 45,700+ stars on GitHub. A full Figma-grade design platform built on open web standards. Vector editing. Components. Design tokens to W3C spec. Flex and Grid layouts. Real-time multiplayer. Interactive prototyping. Here's what it does: → Real-time collaboration. Live cursors. Comments in line. → Components, variants, shared libraries. → Auto layout, Flex, CSS Grid. The tool outputs production CSS, not lookalike CSS. → Interactive prototypes with overlays, animations, and flows. → Inspect tab. Free. Built in. Every developer grabs production CSS, SVG, HTML without a separate seat. → Plugin ecosystem. Figma import to migrate your files. → Self-host on Docker in one command. Your designs never leave your network. Here's the wildest part: Figma stores your designs in a proprietary format only Figma can read. Penpot files are SVG. The same format your browser has rendered for 25 years. Open them in any editor. Open them in 20 years. Nobody can lock you out. The feature Figma charges your developers extra for, Penpot gives away. Without asking permission. Figma Professional: $20/month per seat. A 10-person team: $2,400/year. Figma Organization: $55/month per Full seat. A 50-person org: $33,000/year. Penpot: $0. Unlimited users. Unlimited files. Unlimited teams. Self-hosted. Free forever. 45,700+ stars. 2,700+ forks. 250+ contributors. MPL-2.0 license. Backed by a community that believes design tools should be free. Your designs. Your files. Your standards. 100% Open Source. (Link in the comments)

Nav Toor

216,943 Aufrufe • vor 4 Monaten

CSS Trick 🤙 You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶 article { animation: vibe; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes vibe { 50% { scale: 1; filter: grayscale(0); }} Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌 In this demo, you set a default smaller scale and make each card grayscale 🤏 article { scale: 0.8; filter: grayscale(1); } Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰 It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙 Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @supports and @media ⚡️ Users without support still get a decent experience! CodePen.IO link below! 👇

CSS Trick 🤙 You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶 article { animation: vibe; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @keyframes vibe { 50% { scale: 1; filter: grayscale(0); }} Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌 In this demo, you set a default smaller scale and make each card grayscale 🤏 article { scale: 0.8; filter: grayscale(1); } Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰 It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙 Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @supports and @media ⚡️ Users without support still get a decent experience! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

465,403 Aufrufe • vor 2 Jahren

“blank canvas problem” figma says raw and unformed feelings… this should not be shared. * Look, I love AI! I lead and design products for AI & Data Solutions in one of the largest firms in the world. I use these tools every day. I’m one of the biggest advocates of AI. I do NOT fear it. I leverage it. I appreciate what Figma is trying to do here. Good intentions to help designers build faster. Make the design easier and accessible for everyone. And of course, meanwhile, profit from It. it is a business after all and it is perfectly fine. While I was watching Dylan generate detailed designs from a prompt, I started seeing aspiring designers getting attached to these tools and having everything easy, ready, quick… and a series of questions started to arise in my mind; * ➟ Are we going to see a generation of designers who lack resilience and love/appreciation for craft? ➟ Designers who are easily hurt and seek help from AI tools every time a client raises a criticism for the proposed design? ➟ Are these designers going to blame AI tools for the outcome and not take accountability for it? ➟ Perhaps they will go back to the AI input and generate 20+ options for clients in 5 mins without thinking instead of talking to the client, understanding the product positioning and actually thinking/exploring/working for the best design solution? ➟ Are we going to see lazier designers? and weak, giving up, getting frustrated easily? * Dylan says ”This tool helps us to get past the blank canvas problem” Blank canvas is one of the best parts of this work. A new fresh start with endless possibilities. Staring at the blank screen and reflecting on our past experiences, our conversations with the client, transforming these thoughts on screen pixel by pixel… That’s how we truly understand the problem at hand and grow as designers. You may say I’m being a romantic, trying to stay in the past. No. Again, I build these tools and encourage everyone to leverage them. However, yes, I have concerns. Not about the efficiencies this technology brings, Concerns about; AI may raise a generation of weak-minded designers who lack an appreciation for the craft. * It is 2:14 am, I should go to sleep. I should not share this writing. this is not meant to be for others but for me. just thinking in writing… thinking…. thinking… …

“blank canvas problem” figma says raw and unformed feelings… this should not be shared. * Look, I love AI! I lead and design products for AI & Data Solutions in one of the largest firms in the world. I use these tools every day. I’m one of the biggest advocates of AI. I do NOT fear it. I leverage it. I appreciate what Figma is trying to do here. Good intentions to help designers build faster. Make the design easier and accessible for everyone. And of course, meanwhile, profit from It. it is a business after all and it is perfectly fine. While I was watching Dylan generate detailed designs from a prompt, I started seeing aspiring designers getting attached to these tools and having everything easy, ready, quick… and a series of questions started to arise in my mind; * ➟ Are we going to see a generation of designers who lack resilience and love/appreciation for craft? ➟ Designers who are easily hurt and seek help from AI tools every time a client raises a criticism for the proposed design? ➟ Are these designers going to blame AI tools for the outcome and not take accountability for it? ➟ Perhaps they will go back to the AI input and generate 20+ options for clients in 5 mins without thinking instead of talking to the client, understanding the product positioning and actually thinking/exploring/working for the best design solution? ➟ Are we going to see lazier designers? and weak, giving up, getting frustrated easily? * Dylan says ”This tool helps us to get past the blank canvas problem” Blank canvas is one of the best parts of this work. A new fresh start with endless possibilities. Staring at the blank screen and reflecting on our past experiences, our conversations with the client, transforming these thoughts on screen pixel by pixel… That’s how we truly understand the problem at hand and grow as designers. You may say I’m being a romantic, trying to stay in the past. No. Again, I build these tools and encourage everyone to leverage them. However, yes, I have concerns. Not about the efficiencies this technology brings, Concerns about; AI may raise a generation of weak-minded designers who lack an appreciation for the craft. * It is 2:14 am, I should go to sleep. I should not share this writing. this is not meant to be for others but for me. just thinking in writing… thinking…. thinking… …

Oykun

38,373 Aufrufe • vor 2 Jahren

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can create this Apple-style photo scroller by combining CSS scroll-driven animations and CSS scroll-snap 😍 Peep those changing captions 👀 No JS! img { animation: highlight both linear; animation-timeline: view(inline); 👈 Horizontal animation-range: cover 0% cover 50%; 👈 Finish } @ keyframes highlight { 50% { translate: 0 0; scale: var(--starting-scale); 👈 props opacity: var(--starting-opacity); 👈 } 100% { translate: 0 0; scale: 1; opacity: 1; } } Without the animation support, you get a standard unordered list containing some s 🤙 How do we swap the captions though? The "trick" is to use position: absolute on the figcaption and animate their opacity based on the ViewTimeline of their parent list item 😎 figcaption { animation: show both linear; animation-timeline: --list-item; } @ keyframes show { 0%, 45%, 55%, 100% { opacity: 0; } 50% { opacity: 1; } } li { view-timeline-name: --list-item; view-timeline-axis: inline; 👈 important! } The parent of the scroll track uses position: relative so all the captions sit in the middle even though they are in the right place for the markup 🙌 The last bit is the scroll-snap 🤙 Not much to it at all. Wrap the list and make it scrollable. Then add scroll-snap-type .wrapper { scroll-snap-type: x mandatory; overflow-x: scroll; } Then make sure each list item has scroll-snap-align set on it li { scroll-snap-align: center; } That's it! Pretty cool demo to put together and see how to do this stuff with these APIs 🤓 A lot of cool little tricks to pick up for writing your CSS! ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

234,583 Aufrufe • vor 2 Jahren

First of its kind? New feature in Ghostty: a web-inspector-style "terminal inspector" targeted at CLI, TUI developers. Built right into the terminal, you can see a live view of terminal state, keyboard events, escape sequences, and much much more. 👻💖 Video tour below. Similar to Firebug with Firefox, I'm hoping this helps usher in a new era of develop-ability for terminal applications by making it much much easier to understand what is going on. When the inspector is not in use, there is no perceivable performance impact (benchmarks show the same). When the inspector is in use, the terminal it is inspecting slows down to about half speed due to the overhead. But this only impacts the terminal being inspected. This is a really early version of the inspector. The data organization is kind of messy, its mostly read-only information right now, and there is a lot more information I want to surface. The next step is making a lot of this data read-write so you can actually modify the terminal live (similar to modifying HTML/CSS live in a web inspector) to trial-and-error some changes. This is just the beginning. 😎 Follow along Ghostty development here:

First of its kind? New feature in Ghostty: a web-inspector-style "terminal inspector" targeted at CLI, TUI developers. Built right into the terminal, you can see a live view of terminal state, keyboard events, escape sequences, and much much more. 👻💖 Video tour below. Similar to Firebug with Firefox, I'm hoping this helps usher in a new era of develop-ability for terminal applications by making it much much easier to understand what is going on. When the inspector is not in use, there is no perceivable performance impact (benchmarks show the same). When the inspector is in use, the terminal it is inspecting slows down to about half speed due to the overhead. But this only impacts the terminal being inspected. This is a really early version of the inspector. The data organization is kind of messy, its mostly read-only information right now, and there is a lot more information I want to surface. The next step is making a lot of this data read-write so you can actually modify the terminal live (similar to modifying HTML/CSS live in a web inspector) to trial-and-error some changes. This is just the beginning. 😎 Follow along Ghostty development here:

Mitchell Hashimoto

96,302 Aufrufe • vor 2 Jahren

Prototyping used to scare me. So I tried to escape it. I remember when I first started designing in Figma, prototyping felt like a mountain I didn’t want to climb. It was that one thing most designers quietly avoided some even said it’s not necessary 😄. I searched for shortcuts. Tried ProtoPie. Looked into Principle. Hoped one of them would save me the trouble. But they all felt disconnected. Too complex. Or just not Figma. So I made a decision: If I’m designing in Figma, I’m prototyping in Figma too. That meant doing everything, product planning, ideation, low-fi, high-fi, and interaction flows all in one tool. No more bouncing around. No more excuses. The first nut to crack? A loading effect. It took me 4 days to figure out. I searched everywhere, YouTube had nothing at the time. But I cracked it just one morning I saw myself trying it out in my dream. Woke up immediately and it was 4am, tried it and it worked. And that changed everything. Prototyping became the one language I could use to explain my designs… without explaining. Today, every prototype I create lives and breathes in Figma. Most of them can either be creative exploration or me trying to fix a broken user experience. No exports. No guesswork. Just clean, clickable experiences. It wasn’t easy. But I’m glad I stopped running from it. Because I would’ve missed out on one skill that: ✅ Earned my first £95K within 7 months while in UK. ✅ Got Uber to reach out to speak about interactive design. ✅ Worked with so many client even from Pakistan. ✅ Watched by more than 1 million people in the first 6 months I started sharing interactive designs. ✅ Prototyping landed me a 9-month contract just 3 days after getting laid off last year. ✅ Funny how the skill I once ran from helped me grow from 500 to 50,000 followers in 7 months. Prototyping gave my work a voice. #prototyping #figmaexperience #productdesign

Prototyping used to scare me. So I tried to escape it. I remember when I first started designing in Figma, prototyping felt like a mountain I didn’t want to climb. It was that one thing most designers quietly avoided some even said it’s not necessary 😄. I searched for shortcuts. Tried ProtoPie. Looked into Principle. Hoped one of them would save me the trouble. But they all felt disconnected. Too complex. Or just not Figma. So I made a decision: If I’m designing in Figma, I’m prototyping in Figma too. That meant doing everything, product planning, ideation, low-fi, high-fi, and interaction flows all in one tool. No more bouncing around. No more excuses. The first nut to crack? A loading effect. It took me 4 days to figure out. I searched everywhere, YouTube had nothing at the time. But I cracked it just one morning I saw myself trying it out in my dream. Woke up immediately and it was 4am, tried it and it worked. And that changed everything. Prototyping became the one language I could use to explain my designs… without explaining. Today, every prototype I create lives and breathes in Figma. Most of them can either be creative exploration or me trying to fix a broken user experience. No exports. No guesswork. Just clean, clickable experiences. It wasn’t easy. But I’m glad I stopped running from it. Because I would’ve missed out on one skill that: ✅ Earned my first £95K within 7 months while in UK. ✅ Got Uber to reach out to speak about interactive design. ✅ Worked with so many client even from Pakistan. ✅ Watched by more than 1 million people in the first 6 months I started sharing interactive designs. ✅ Prototyping landed me a 9-month contract just 3 days after getting laid off last year. ✅ Funny how the skill I once ran from helped me grow from 500 to 50,000 followers in 7 months. Prototyping gave my work a voice. #prototyping #figmaexperience #productdesign

designwithkingsley

13,869 Aufrufe • vor 1 Jahr

Engineers, creatives, designers - lend me your ears, and eyes, to check my🥇1st tech demo of 2025: A #WebAI Agent running entirely client side in the browser, that's capable of controlling a flight search webpage, to get the job done! I'm using Google's Gemma 2 (2B) model in #JavaScript via #WebGPU thanks to the MediaPipe Web LLM library, combined with some extra function calling logic to enable advanced user experiences. If you like what you see, give this post a share, as I'm just one guy trying to show the world the power of Web AI to do great things. Try it for yourself using the link below after watching the video, but do so on a modernish machine (I have verified it runs on my 6 year old Dell XPS with only an Intel integrated GPU) but use a modern browser like Chrome as it needs WebGPU to run. Want me to make a demo for your industry? Tell me what you need / want to see next! Let me know what you think, and if you have any questions, then drop them in the comments below! YouTube Video Link:

Engineers, creatives, designers - lend me your ears, and eyes, to check my🥇1st tech demo of 2025: A #WebAI Agent running entirely client side in the browser, that's capable of controlling a flight search webpage, to get the job done! I'm using Google's Gemma 2 (2B) model in #JavaScript via #WebGPU thanks to the MediaPipe Web LLM library, combined with some extra function calling logic to enable advanced user experiences. If you like what you see, give this post a share, as I'm just one guy trying to show the world the power of Web AI to do great things. Try it for yourself using the link below after watching the video, but do so on a modernish machine (I have verified it runs on my 6 year old Dell XPS with only an Intel integrated GPU) but use a modern browser like Chrome as it needs WebGPU to run. Want me to make a demo for your industry? Tell me what you need / want to see next! Let me know what you think, and if you have any questions, then drop them in the comments below! YouTube Video Link:

Jason Mayes

42,895 Aufrufe • vor 1 Jahr

Steal this mega prompt to generate high quality landing pages using LLMs and go viral every single day. --- You are an expert landing page designer and frontend developer specializing in high-converting, beautiful web experiences. CONTEXT: I need a landing page for [product/service name]. TARGET AUDIENCE: [describe your ideal customer] PRIMARY GOAL: [e.g., email signups, demo bookings, purchases] BRAND VOICE: [e.g., professional, playful, technical, aspirational] DESIGN SYSTEM REQUIREMENTS: - Primary Color: [hex code] - Secondary Color: [hex code] - Font: [font family] - Design Style: [modern, minimal, bold, etc.] STRUCTURE: Create a single-page landing page with these sections: 1. Hero Section - Attention-grabbing headline (focus on outcome, not feature) - Subheadline clarifying value proposition - Primary CTA button - Hero visual placeholder or description 2. Problem Section - Articulate the pain point clearly - Use relatable language - Build urgency subtly 3. Solution Section - How your product solves the problem - 3-4 key benefits (outcome-focused, not feature-focused) - Visual aids or icons 4. Social Proof - Testimonials (if available) or trust indicators - Logos of companies/clients (if applicable) - Metrics or results 5. How It Works - 3-step process - Simple, clear language - Visual flow 6. Final CTA Section - Reinforce primary action - Remove friction (e.g., "No credit card required") - Create urgency if appropriate TECHNICAL REQUIREMENTS: - Use semantic HTML5 - Tailwind CSS for styling (use only core utility classes) - Mobile-first responsive design - Smooth scroll behavior - Accessible (WCAG AA compliant) - Fast loading (optimize for performance) - Include meta tags for SEO COPY GUIDELINES: - Keep headlines under 10 words - Use active voice - Focus on outcomes, not features - Avoid jargon unless audience expects it - Every section should answer "What's in it for me?" OUTPUT: Provide complete HTML file with inline Tailwind CSS. Include comments explaining key sections. Ensure all placeholder content is realistic and contextual. CONSTRAINTS: - No external dependencies except Tailwind CDN - No JavaScript frameworks - Keep total file size under 100KB - Use system fonts or Google Fonts CDN Build this landing page now.

Harshil Tomar

23,305 Aufrufe • vor 7 Monaten

Excited to show some surprising inventions on generative multiplayer games we made at Google with Stanford. We call the work MultiGen. I've always been inspired by early studios like id Software with Doom or Blizzard with Warcraft bringing networked video games to the next level. We are at the point in history where we can make strides like them, but for generative games. It's a strange feeling to be in the age of generative video games while still discovering how exactly to train the models and design the tools that make them useful. All of the tools that have been invented for classic game engines need to be redesigned for generative games. For example level and world design is not entirely possible with existing technology. We introduce editable memory to diffusion game engines that allow for design of new levels via a minimap. But we can easily imagine how this can be expanded with different creation tools. The end goal of this research direction is to allow game designers to be able to guide the generation process of their world, at the granularity that they prefer. Editable memory also allows us to add multiplayer to Generative Doom. We were amazed when we saw GameNGen some years ago, and now you can play it live with friends in real-time, on your couch or even online. Shared representations like our editable memory seem like the future for this type of experience. Models are, in some cases, expensive and approximate encoders but great interpolators and extrapolators. Leveraging their strengths lets you have completely new experiences that can be realized now and not in the distant future. This work was started at my previous team and continued in collaboration with Stanford. Congratulations to all for the discoveries.

Excited to show some surprising inventions on generative multiplayer games we made at Google with Stanford. We call the work MultiGen. I've always been inspired by early studios like id Software with Doom or Blizzard with Warcraft bringing networked video games to the next level. We are at the point in history where we can make strides like them, but for generative games. It's a strange feeling to be in the age of generative video games while still discovering how exactly to train the models and design the tools that make them useful. All of the tools that have been invented for classic game engines need to be redesigned for generative games. For example level and world design is not entirely possible with existing technology. We introduce editable memory to diffusion game engines that allow for design of new levels via a minimap. But we can easily imagine how this can be expanded with different creation tools. The end goal of this research direction is to allow game designers to be able to guide the generation process of their world, at the granularity that they prefer. Editable memory also allows us to add multiplayer to Generative Doom. We were amazed when we saw GameNGen some years ago, and now you can play it live with friends in real-time, on your couch or even online. Shared representations like our editable memory seem like the future for this type of experience. Models are, in some cases, expensive and approximate encoders but great interpolators and extrapolators. Leveraging their strengths lets you have completely new experiences that can be realized now and not in the distant future. This work was started at my previous team and continued in collaboration with Stanford. Congratulations to all for the discoveries.

Nataniel Ruiz

104,932 Aufrufe • vor 6 Monaten

Just realized I never shared this one here: A while ago I was interested in seeing if we could make an 'engine' for retro consoles, so, since NESMaker already exists and I've always been a fan of the NeoGeo, I dabbled with creating a 'NGMaker'. The idea would be that users could pick from some simple template projects and ideally create all kinds of games with it without having to get into the nitty gritty assembly stuff - unless they want to. The first template project I put together was a simple platformer demo where the idea was to mimic the Super Mario Bros 3 controls while fusing that with some Metal Slug energy... meaning: A run and gun with good platformer controls. I often talked about how it's important to get the basics right, so, the idea here was to simply start with a white rectangle that moves around and even that should feel fun to play. I added some entities like the question blocks that could spawn powerups and enemies that are reactive: They patrol around, notice a player character when they're in their sights and then shoot at them. If you fire at them, they have a little bit of hit feedback, etc. For the people who lack vision, careful, I'm gonna use an AI image to show what this could turn into. And the nice thing is that this runs on original hardware, as demonstrated by running the rom the maker produces in retroarch using a NeoGeo core.

Just realized I never shared this one here: A while ago I was interested in seeing if we could make an 'engine' for retro consoles, so, since NESMaker already exists and I've always been a fan of the NeoGeo, I dabbled with creating a 'NGMaker'. The idea would be that users could pick from some simple template projects and ideally create all kinds of games with it without having to get into the nitty gritty assembly stuff - unless they want to. The first template project I put together was a simple platformer demo where the idea was to mimic the Super Mario Bros 3 controls while fusing that with some Metal Slug energy... meaning: A run and gun with good platformer controls. I often talked about how it's important to get the basics right, so, the idea here was to simply start with a white rectangle that moves around and even that should feel fun to play. I added some entities like the question blocks that could spawn powerups and enemies that are reactive: They patrol around, notice a player character when they're in their sights and then shoot at them. If you fire at them, they have a little bit of hit feedback, etc. For the people who lack vision, careful, I'm gonna use an AI image to show what this could turn into. And the nice thing is that this runs on original hardware, as demonstrated by running the rom the maker produces in retroarch using a NeoGeo core.

thomasmahler

24,345 Aufrufe • vor 4 Monaten

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

yancymin

21,222 Aufrufe • vor 1 Jahr

$CSS Tip! 🤙 You can create custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇$

CSS Tip! 🤙 You can create custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

574,787 Aufrufe • vor 2 Jahren

HERMES AGENT CAN CREATE VIDEOS. NOT WITH AN API CALL. IT WRITES THE CODE, RENDERS THE SCENES, AND STITCHES THEM INTO AN MP4. the video attached to this post was generated by Hermes Agent using manim-video skill. three bundled video skills most people skip: 1. MANIM VIDEO 3Blue1Brown-style animated explainers. algorithm visualizations, equation derivations, architecture diagrams, data stories. the pipeline: PLAN → CODE → RENDER → STITCH → AUDIO → REVIEW Hermes writes a plan.md with narrative arc and scene list. then codes a Python script with one class per scene. renders each scene through Manim CE. stitches clips with ffmpeg. adds voiceover if you want it. requirements: → Python 3.10+ → Manim Community Edition v0.20+ → LaTeX (texlive-full) → ffmpeg → no GPU needed draft quality: manim -ql production quality: manim -qh 2. HYPERFRAMES complement to manim-video. use manim for math and algorithms. use hyperframes for everything else: motion graphics, talking-head with captions, product tours, social overlays, shader transitions. HTML is the source of truth. GSAP timeline for animation. CSS for appearance. HyperFrames engine captures frame-by-frame and encodes to MP4 or WebM with ffmpeg. 3. KANBAN VIDEO ORCHESTRATOR this is the advanced play. a multi-agent video production pipeline backed by Hermes Kanban. it creates profiles for each video role. a director profile decomposes the project into kanban tasks. renderer profiles pick up scenes and produce them. the orchestrator decides which skill fits each scene: manim-video for math, hyperframes for motion graphics, p5js for generative art, blender-mcp for 3D, ascii-video for terminal aesthetics. one prompt. multiple agents. one final video. HOW TO USE: enable any of these: /skills search manim /skills search hyperframes /skills search video or ask directly: "create a 60-second explainer video about how the self-improvement loop works in Hermes Agent. use manim style. dark background, amber and teal accents." Hermes writes the plan, codes every scene, renders, stitches, and delivers an MP4. you review and publish. comment MANIM and I'll send you the exact prompt I used to generate the video in this post. full Hermes NIGHT MODE WORKFLOW 👇

YanXbt

33,602 Aufrufe • vor 3 Monaten

My upcoming release of "Cinematic AI" has made me think about how bodies of work are formed. I think some are manifested and some are revealed. I think "Cinematic AI" falls into the latter category. It was not something I had a clear vision for and then created, but it was something that was revealed to me over time. I thought I saw a glimmer of it early on, but only after some time had past, could I see the body of work emerge. With a bit more context and watching great artists and how they work and think, it finally came to me that this series of 15-20 pieces that I had created could be a worthy collection to mint. AI art has been going through so many transformations from the early GAN work to Collaborative AI to now AI being widely accessible through platforms like MidJourney, Stable Diffusion, and many others. But one area that I have seen explode in recent months is cinematic AI. I distinguish this from animated AI, which has been around for a while, but cinematic AI is where the movements created by AI are getting closer to what you'd see in a movie or captured on a video camera. It still has a long way to go but it is getting more real than surreal as the technology develops. And this is where I seem to have found my groove, my home, my little corner in the artistic landscape. After Runway launched their image-to-video tool, it just blew my mind and I went down a deep rabbit hole and have created a new cinematic AI piece almost every other day for the past few months. I initially saw many of these pieces as just experiments, but with some time to reflect, I am seeing them as having the potential of being relevant pieces of artwork to mark this time in the development of AI. In some cases, I'm not sure if I'll ever be able to create a similar piece again, since the tools I use are not in my control, but in the control of the AI platforms, who are constantly improving and evolving the tools. Given all of this, there is no better way to mark my place in time than on the blockchain. I truly believe that this body of work has the potential to be an important artifact of this era in AI and AI art. It is always hard to judge ones own work, but what I can do is permanently etch in time on an immutable public database saying that I created this. Only time will tell if the work has any value or is of any significance, but who created it and what was created cannot be disputed. I hope this gives you and especially collectors some perspective on the work I'll be releasing next week. I'm still very early in my artistic journey, but hopefully some of you will see promise in what I'm doing and maybe even put in a early bet on my art practice by bidding on a piece next week. Thanks to all of you who have supported me, taught me, advised me, been a friend to me. Much love and respect.🙏 ------------------------------------- CINEMATIC AI October 25, 2023 Marking on the blockchain, establishing historical provenance for a cinematic AI body of work. Minting on Transient Labs ERC-721TL Listing on SuperRare

My upcoming release of "Cinematic AI" has made me think about how bodies of work are formed. I think some are manifested and some are revealed. I think "Cinematic AI" falls into the latter category. It was not something I had a clear vision for and then created, but it was something that was revealed to me over time. I thought I saw a glimmer of it early on, but only after some time had past, could I see the body of work emerge. With a bit more context and watching great artists and how they work and think, it finally came to me that this series of 15-20 pieces that I had created could be a worthy collection to mint. AI art has been going through so many transformations from the early GAN work to Collaborative AI to now AI being widely accessible through platforms like MidJourney, Stable Diffusion, and many others. But one area that I have seen explode in recent months is cinematic AI. I distinguish this from animated AI, which has been around for a while, but cinematic AI is where the movements created by AI are getting closer to what you'd see in a movie or captured on a video camera. It still has a long way to go but it is getting more real than surreal as the technology develops. And this is where I seem to have found my groove, my home, my little corner in the artistic landscape. After Runway launched their image-to-video tool, it just blew my mind and I went down a deep rabbit hole and have created a new cinematic AI piece almost every other day for the past few months. I initially saw many of these pieces as just experiments, but with some time to reflect, I am seeing them as having the potential of being relevant pieces of artwork to mark this time in the development of AI. In some cases, I'm not sure if I'll ever be able to create a similar piece again, since the tools I use are not in my control, but in the control of the AI platforms, who are constantly improving and evolving the tools. Given all of this, there is no better way to mark my place in time than on the blockchain. I truly believe that this body of work has the potential to be an important artifact of this era in AI and AI art. It is always hard to judge ones own work, but what I can do is permanently etch in time on an immutable public database saying that I created this. Only time will tell if the work has any value or is of any significance, but who created it and what was created cannot be disputed. I hope this gives you and especially collectors some perspective on the work I'll be releasing next week. I'm still very early in my artistic journey, but hopefully some of you will see promise in what I'm doing and maybe even put in a early bet on my art practice by bidding on a piece next week. Thanks to all of you who have supported me, taught me, advised me, been a friend to me. Much love and respect.🙏 ------------------------------------- CINEMATIC AI October 25, 2023 Marking on the blockchain, establishing historical provenance for a cinematic AI body of work. Minting on Transient Labs ERC-721TL Listing on SuperRare

Chikai

21,517 Aufrufe • vor 2 Jahren

Last night I was proud and inspired to attend It Sounds Like Courage at the Royal Festival Hall — a breathtaking evening of music, poetry and solidarity with refugees. Nai Barghouti’s performance was luminous, her flute and voice filling that great hall with beauty and defiance. Accompanied by the London Contemporary Orchestra, she brought to life the words of professor and poet Refaat Alareer, who wrote this poem weeks before an Israeli airstrike killed him and members of his family. If I Must Die If I must die, you must live to tell my story to sell my things to buy a piece of cloth and some strings, (make it white with a long tail) so that a child, somewhere in Gaza while looking heaven in the eye awaiting his dad who left in a blaze — and bid no one farewell not even to his flesh not even to himself — sees the kite, my kite you made, flying up above, and thinks for a moment an angel is there bringing back love. If I must die let it bring hope, let it be a tale.

Last night I was proud and inspired to attend It Sounds Like Courage at the Royal Festival Hall — a breathtaking evening of music, poetry and solidarity with refugees. Nai Barghouti’s performance was luminous, her flute and voice filling that great hall with beauty and defiance. Accompanied by the London Contemporary Orchestra, she brought to life the words of professor and poet Refaat Alareer, who wrote this poem weeks before an Israeli airstrike killed him and members of his family. If I Must Die If I must die, you must live to tell my story to sell my things to buy a piece of cloth and some strings, (make it white with a long tail) so that a child, somewhere in Gaza while looking heaven in the eye awaiting his dad who left in a blaze — and bid no one farewell not even to his flesh not even to himself — sees the kite, my kite you made, flying up above, and thinks for a moment an angel is there bringing back love. If I must die let it bring hope, let it be a tale.

Husam Zomlot

13,476 Aufrufe • vor 2 Monaten