Chanterelle
- Scientific Name: Cantharellus cibarius
- Region: Found in Europe, North America, and Asia, usually in hardwood forests.
- Fact: Chanterelles have a fruity smell, often compared to apricots!
Card Slider Demo: Interactive Design Showcase
Who
I am using two demos from codepen, The first one is by Chris Bolson he made a cool slider card showing differen't butterflies of the world. The second is by Anya Melnyk and is a simple fireflies animation.
Where
Fireflies at Night - by Anya Melnyk
When
Fireflies at Night Animation was created on Junuary 23, 2018
Butterflies was created on April 21, 2025
What
The Butterflies codepen is a slider card, when clicking on the arrows a new butterfly spins in and the text is updated with said butterflies information. With the fireflies it is an animation of glowing dots that float around the screen.
Why
This rotating card spinner transforms simple content into an engaging visual. Instead of overwhelming users with walls of text, it invites them to explore one concept at a time in an interactive way. The subtle animations and ambient effects create a sense of atmosphere, making the information feel more alive and memorable. I think a card like this would be ideal for storytelling, education, portfolios, product showcases, and anywhere you want to combine movement, curiosity, and discovery into the user experience.
How This Works
This project combines modern CSS, animations, and interactive elements to create an immersive card spinner experience. Here's a breakdown of some key parts
Radio Buttons Control Cards
The radio buttons determine which mushroom card is active. Switching them triggers CSS magic to rotate the circle and update the card content.
<input type="radio" name="card" id="card-1" checked>
<input type="radio" name="card" id="card-2">
<input type="radio" name="card" id="card-3">
<input type="radio" name="card" id="card-4">
<input type="radio" name="card" id="card-5">
<input type="radio" name="card" id="card-6">
<input type="radio" name="card" id="card-7">
<input type="radio" name="card" id="card-8">
CSS :has() Magic
The :has() selector checks which radio is active and updates the rotation of the circle
based on a CSS variable.
&:has(#card-1:checked) {
--target: 1;
--opacity-card-1: 1;
}
&:has(#card-2:checked) {
--target: 2;
--opacity-card-2: 2;
}
&:has(#card-3:checked) {
--target: 3;
--opacity-card-3: 3;
}
&:has(#card-4:checked) {
--target: 4;
--opacity-card-4: 4;
}
&:has(#card-5:checked) {
--target: 5;
--opacity-card-5: 5;
}
&:has(#card-6:checked) {
--target: 6;
--opacity-card-6: 6;
}
&:has(#card-7:checked) {
--target: 7;
--opacity-card-7: 7;
}
&:has(#card-8:checked) {
--target: 8;
--opacity-card-8: 8;
}
Spawning Fireflies
This loop spawns multiple glowing fireflies randomly floating in the background.
for (let i = 0; i < 75; i++) {
createFirefly();
}
Firefly Bursts on Interaction
Each time you switch cards, a little burst of fireflies pops outward directly above the heading with a class of .card-title
function createFireflyBurst(x, y) {
for (let i = 0; i < 50; i++) {
const burst = document.createElement("div");
burst.classList.add("firefly");
burst.style.left = x + "px";
burst.style.top = y + "px";
fireflyContainer.appendChild(burst);
gsap.to(burst, {
x: `+=${(Math.random() - 0.5) * 400}`,
y: `+=${(Math.random() - 0.5) * 400}`,
opacity: 0,
scale: Math.random() * 2,
duration: 4,
ease: "power2.out",
onComplete: () => burst.remove(),
});
}
}
const cardInputs = document.querySelectorAll('input[name="card"]');
cardInputs.forEach((input) => {
input.addEventListener("change", () => {
const title = document.querySelector(".card-title");
const rect = title.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + window.scrollY - 30;
createFireflyBurst(centerX, centerY);
});
});
Edible Mushrooms
Black Trumpet
- Scientific Name: Craterellus cornucopioides
- Region: North America, Europe, and parts of Asia (deciduous forests)
- Fact: Nicknamed the "Horn of Plenty" because of its shape!
Enoki
- Scientific Name: Flammulina velutipes
- Region: Native to East Asia (but now cultivated worldwide)
- Fact: In the wild, Enoki mushrooms are brown and shaggy—only cultivated ones are long and white!
King Oyster
- Scientific Name: Pleurotus eryngii
- Region: Native to the Mediterranean, Middle East, and parts of Asia
- Fact: It’s the largest species in the oyster mushroom family and has a meaty texture loved in vegan cooking!
Porcini
- Scientific Name: Boletus edulis
- Region: Europe, North America, and Asia
- Fact: Porcini are prized for their nutty, rich flavor in gourmet cooking!
Oyster
- Scientific Name: Pleurotus ostreatus
- Region: Found worldwide, especially in temperate and subtropical forests
- Fact: Oyster mushrooms can actually consume and break down plastic in certain conditions!
Shiitake
- Scientific Name: Lentinula edodes
- Region: Native to East Asia
- Fact: Shiitake mushrooms have been used in traditional medicine for centuries!
Morell
- Scientific Name: Morchella esculenta
- Region: North America and Europe
- Fact: Morels are highly sought after and can sell for hundreds of dollars per pound!