Hello 👋!

So, yesterday, I released pride-rs to allow Rustaceans to easily add pride flags to their landing pages. But then I thought, "Hmm. This is nice, but it's not nearly gay enough." There was no theatrical entrance, no bright attractiveness, no Ferris the crab doing a dance move on a Progress Pride flag.

So obviously, I needed to take things to the next level.

I should push it to the absolute extreme. I needed to put flags somewhere big, bold, fabulous, and meaningful. Naturally, I used hero crate: a package for making hero sections in WASM: and decided it was time to inject it with unapologetic queer energy.

Thus, the pride component was born.

What Is pride

Think of pride as the drag queen cousin of the classic hero section: big text, big flags, big feels.

It's a hero landing page component, built with the same modularity and power of hero, but now capable of screaming "🏳️‍🌈 Gay Rights!" on page load. It's designed for events, queer community shout-outs, or just asserting your gender in the HTML.

You can now build pages like:

• "Hey trans Rust devs, meet up at 5PM for iced coffee and WASM talk!"
• "Lesbian Rustaceans Unite: Queer systems programming social."
• "Ferris the crab is nonbinary now. Come to our journal night."

Demo

Here's what the pride landing page look like using Yew:

That's it. You now have a stunning, queer-coded hero section greeting your users like a warm hug and a sparkle bomb.

Why This Exists

Let's be real: dev events, even Rust ones, can feel a little... cis-het-middle-aged-microservice-coded.

And while we love robust type systems, sometimes what we really want is a space to say:

"Hey, let's just hang out, talk open source, and also maybe be a little gay about it."

This component is an invitation. A declaration. A banner saying:

"Queer Rust devs are here, and we brought snacks."

It helps organizers quickly build landing pages for events, meetups, game jams, mutual aid projects, journal nights, or "let's write poetry in Rust" circles.

Canon Update

Ferris the Crab? You mean Fabulous Ferris? Yeah, Ferris is canonically queer. We've decided.

They/them pronouns. Wears eyeliner. Possibly dating Clippy.

In fact, we believe every flag in pride-rs is a little home Ferris can march across.

Future Ideas

Coming soon to pride:

• Mobile responsiveness
• Document the Design and thought process
• Animated flag transitions
• Confetti drop on CTA click
• Server-side rendering support
• Ferris doing a little jig on hover

Community Love

Building queer-inclusive spaces in tech isn't just about HR policies, it's about what we ship. Even a single pride flag on a dev landing page can make someone feel seen.

Let's queer up the web one div at a time. In Rust. With hero. With Pride.

For Judges

If you'd like to test this project locally, you can do so using Yew. Please refer to the README file and the source code for detailed instructions on how to run it locally.

Final Thoughts

If you're planning a queer-friendly event, building a Rust community initiative, or just want your site to slay, the pride component in hero has your back.

It's fast, accessible, and deeply, flamboyantly Rust.

Add it. Ship it. Celebrate it 🏳️‍🌈🦀.

opensass / hero

🦸 Hero Components for WASM frameworks.

🦸 Hero

🎬 Demo

Framework	Live
Yew
Dioxus	TODO
Leptos	TODO

📜 Intro

Hero is a highly customizable hero sections components for WASM Frameworks like Yew, Leptos, and Dioxus. It helps you build beautiful, responsive hero sections with minimal setup and maximum customization.

🤔 Why Use Hero?

1. 📱 Responsive by Default: Automatically adapts to different screen sizes with clean mobile-first layout support.

2. 🎨 Easy to Customize: Configure layout, alignment, spacing, images, call-to-actions, and more using straightforward props.

3. 🧩 Pluggable Content Areas: Drop in your own headings, subheadings, images, buttons, or components with slot-like flexibility.

4. 🌈 Theming & Styling Freedom: Comes unopinionated; Style it using Tailwind CSS, regular classes, or inline styles.

5. ⚙️ Framework Friendly: Designed for seamless integration with Yew, Leptos, Dioxus, or any other WASM-based UI framework.

Yew Usage

Refer to our guide to integrate this component into…

View on GitHub

P.S. Join us in the Open SASS Discord: we have a queer rust web channel and it is exactly as lovely as you'd hope.

Till next time: Keep Rustin', keep Pride'n 💖