Загрузка видео...
Не удалось загрузить видео
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 🤲🏽💙
21,614 просмотров • 10 месяцев назад •via X (Twitter)
Комментарии: 27
@Manniegraphics_ Bravo. Amazing work
@Manniegraphics_ Thank you 🙏🏽
@Manniegraphics_ This is dope 😎 Welldone sir 🫡
@IF3OLUWA25 @Manniegraphics_ Thank you 🙏🏽
@Manniegraphics_ Damnn👌
@Manniegraphics_ 🤲🏽🤲🏽
@Manniegraphics_ 🔥🔥🔥woah wth
@Manniegraphics_ 🫠🫠
@Manniegraphics_ Awesome 🙌🏼🔥 I was going to follow you then realised I was already following you.
@Manniegraphics_ Hehehe 😅 Thank you 🙏🏽
@Manniegraphics_ Nice work boss
@Manniegraphics_ Thank you 🙏🏽
@Manniegraphics_ I love Design Engineers sm Crazy stuff man 🔥
@Manniegraphics_ Thank you so much 🥹🤲🏽
@Manniegraphics_ Nice work. Audio reference?
@Manniegraphics_ Thank you. supwel - another vibe
@Manniegraphics_ Nailed it with the eye movements 🌹
@Manniegraphics_ Una dey shame pesin o
@Manniegraphics_ Amazing work 🚀💯
@Manniegraphics_ Amazing 🔥🔥
@Manniegraphics_ Oh wow! This is amazing.
@Manniegraphics_ This is really amazing 🤜🏾, cool stuff. How can I learn to do something like this with CSS?
@Manniegraphics_ This is amazing 👏
@Manniegraphics_ Too solid man, I just followed!
@Manniegraphics_ Nothing like pity devs o. html and css?!!!! Nice work
@Manniegraphics_ Bruuuhhhh🚀🚀🚀
@Manniegraphics_ amazing!
![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.](https://image.24vids.com/tw-2017621753418178787/ext_tw_video_thumb/2017621465009385474/pu/img/OhYpCN705HvIvizw.jpg)
![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! 👇](https://image.24vids.com/tw-1735499859715584298/ext_tw_video_thumb/1735496613617926145/pu/img/K88_7XNeukK-81aQ.jpg)
