Skip to content

Instantly share code, notes, and snippets.

@ArseniyShestakov

ArseniyShestakov/gemini-3-flash-three-little-pigs.html

Created May 19, 2026 20:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ArseniyShestakov/f58eff069cf916031c97d560b0e35f7e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ArseniyShestakov/f58eff069cf916031c97d560b0e35f7e to your computer and use it in GitHub Desktop.
Download ZIP
Gemini 3 Flash Thinking High: Three Little Pigs
Raw
gemini-3-flash-three-little-pigs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Little Pigs Animation</title>
<style>
body { margin: 0; background: #e0f7fa; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Segoe UI', sans-serif; }
#canvas { width: 800px; height: 450px; background: linear-gradient(#87CEEB 70%, #2ecc71 70%); border: 5px solid #333; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3); overflow: hidden; }
/* Story Text Overlay */
#narration { position: absolute; top: 20px; width: 100%; text-align: center; font-size: 20px; font-weight: bold; color: #2c3e50; text-shadow: 1px 1px 2px white; z-index: 10; transition: opacity 0.5s; }
/* Character & Object Styles */
.pig { transition: all 1s ease-in-out; }
.wolf { transition: all 1s ease-in-out; opacity: 0; }
.house { transition: opacity 0.5s, transform 0.5s; }
/* Wind Animation */
.wind { stroke: white; stroke-width: 3; fill: none; opacity: 0; stroke-dasharray: 50; }
.blowing .wind { animation: blow 0.5s linear infinite; opacity: 1; }
@keyframes blow {
0% { stroke-dashoffset: 50; transform: translateX(0); }
100% { stroke-dashoffset: 0; transform: translateX(30px); }
}
@keyframes shake {
0%, 100% { transform: translate(0,0); }
25% { transform: translate(-5px, 0); }
75% { transform: translate(5px, 0); }
}
.shaking { animation: shake 0.1s infinite; }
</style>
</head>
<body>
<div id="canvas">
<div id="narration">Once upon a time...</div>
<svg width="800" height="450" viewBox="0 0 800 450">
<!-- Background Elements -->
<circle cx="700" cy="60" r="30" fill="#f1c40f" /> <!-- Sun -->
<!-- The Houses -->
<g id="house-straw" class="house" transform="translate(100, 240)">
<path d="M0 70 L50 0 L100 70 Z" fill="#f4d03f" /> <!-- Roof -->
<rect y="70" width="100" height="80" fill="#f1c40f" stroke="#d4ac0d" />
<rect x="40" y="110" width="20" height="40" fill="#7e5109" />
</g>
<g id="house-sticks" class="house" transform="translate(350, 240)">
<path d="M0 70 L50 0 L100 70 Z" fill="#a0522d" />
<rect y="70" width="100" height="80" fill="#cd853f" stroke="#8b4513" />
<rect x="40" y="110" width="20" height="40" fill="#5d4037" />
</g>
<g id="house-bricks" class="house" transform="translate(600, 210)">
<rect x="70" y="-20" width="20" height="40" fill="#555" /> <!-- Chimney -->
<path d="M-10 70 L60 0 L130 70 Z" fill="#7b241c" />
<rect y="70" width="120" height="110" fill="#a93226" stroke="#641e16" />
<!-- Brick Pattern -->
<line x1="0" y1="100" x2="120" y2="100" stroke="#cd6155" />
<line x1="0" y1="130" x2="120" y2="130" stroke="#cd6155" />
<rect x="50" y="140" width="25" height="40" fill="#5d4037" />
</g>
<!-- Wind lines for wolf -->
<g id="wind-lines" class="wind">
<path d="M 0 0 Q 20 -10 40 0" transform="translate(0,0)" />
<path d="M 0 20 Q 20 10 40 20" transform="translate(-10,0)" />
</g>
<!-- Characters -->
<g id="wolf" class="wolf" transform="translate(-100, 310)">
<path d="M0 0 L40 10 L0 20 Z" fill="#555" /> <!-- Head -->
<rect x="-40" y="5" width="40" height="30" rx="5" fill="#555" /> <!-- Body -->
<path d="M0 0 L5 -10 L10 2 Z" fill="#555" /> <!-- Ear -->
<circle cx="30" cy="8" r="2" fill="red" /> <!-- Eye -->
</g>
<g id="pig1" class="pig" transform="translate(140, 330)">
<circle r="15" fill="#ffc0cb" />
<circle cx="10" cy="0" r="5" fill="#ff8095" /> <!-- Snout -->
<circle cx="5" cy="-5" r="2" fill="black" /> <!-- Eye -->
</g>
<g id="pig2" class="pig" transform="translate(390, 330)">
<circle r="15" fill="#ffc0cb" />
<circle cx="10" cy="0" r="5" fill="#ff8095" />
<circle cx="5" cy="-5" r="2" fill="black" />
</g>
<g id="pig3" class="pig" transform="translate(650, 340)">
<circle r="15" fill="#ffc0cb" />
<circle cx="10" cy="0" r="5" fill="#ff8095" />
<circle cx="5" cy="-5" r="2" fill="black" />
</g>
</svg>
</div>
<script>
const narration = document.getElementById('narration');
const wolf = document.getElementById('wolf');
const pig1 = document.getElementById('pig1');
const pig2 = document.getElementById('pig2');
const pig3 = document.getElementById('pig3');
const hStraw = document.getElementById('house-straw');
const hSticks = document.getElementById('house-sticks');
const hBricks = document.getElementById('house-bricks');
const wind = document.getElementById('wind-lines');
function setScene(text, delay) {
return new Promise(resolve => {
narration.innerText = text;
setTimeout(resolve, delay);
});
}
async function runStory() {
// Scene 1: Intro
await setScene("The three little pigs built their houses...", 2000);
// Scene 2: Straw House
wolf.style.opacity = "1";
wolf.style.transform = "translate(30, 310)";
await setScene("The Big Bad Wolf arrived at the straw house!", 2000);
await setScene("He huffed and he puffed!", 500);
wind.style.opacity = "1";
wind.setAttribute("transform", "translate(70, 310)");
hStraw.classList.add('shaking');
await setScene("And he blew the house down!", 1500);
hStraw.style.opacity = "0";
hStraw.style.transform = "translate(100, 240) scale(0)";
wind.style.opacity = "0";
pig1.style.transform = "translate(390, 330)";
await setScene("The little pig ran to his brother's stick house!", 2000);
// Scene 3: Stick House
wolf.style.transform = "translate(280, 310)";
await setScene("The Wolf went to the stick house...", 2000);
wind.style.opacity = "1";
wind.setAttribute("transform", "translate(320, 310)");
hSticks.classList.add('shaking');
await setScene("He huffed and he puffed and he BLEW it down!", 2000);
hSticks.style.opacity = "0";
hSticks.style.transform = "translate(350, 240) scale(0)";
wind.style.opacity = "0";
pig1.style.transform = "translate(630, 340)";
pig2.style.transform = "translate(670, 340)";
await setScene("Both pigs ran to the brick house!", 2000);
// Scene 4: Brick House
wolf.style.transform = "translate(520, 330)";
await setScene("The Wolf tried his hardest at the brick house...", 2000);
wind.style.opacity = "1";
wind.setAttribute("transform", "translate(560, 330)");
hBricks.classList.add('shaking');
await setScene("He huffed... and puffed... but nothing happened!", 3000);
hBricks.classList.remove('shaking');
wind.style.opacity = "0";
// Scene 5: The Chimney
await setScene("The Wolf decided to climb down the chimney!", 2000);
wolf.style.transform = "translate(670, 100) rotate(-90deg)"; // Move to roof
await setScene("But the pigs had a pot of boiling water waiting!", 1500);
wolf.style.transform = "translate(670, 250) rotate(-90deg)"; // Drop down
wolf.style.opacity = "0";
// Final Scene
await setScene("The Wolf ran away and never came back!", 2000);
await setScene("The three little pigs lived happily ever after.", 5000);
location.reload(); // Restart animation
}
window.onload = runStory;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment