A faithful recreation of Apple’s iconic “Think Different” advertisement campaign, featuring precise timing, sophisticated typography, and the classic rainbow Apple logo. This minimalist application demonstrates advanced CSS animations and JavaScript timing control.
quote/
└── index.html # Complete self-contained application
/* Apple Garamond font loading */
@font-face {
font-family: 'Apple Garamond';
src: url('https://github.com/fizx/kylemaxwell_com/raw/master/fn/fonts/apple%20garamond.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Typography hierarchy */
#container {
color: white;
font-family: 'Apple Garamond', Garamond, serif;
font-size: 3vh;
text-align: center;
opacity: 0;
}
/* Minimalist layout */
html, body {
margin: 0;
padding: 0;
height: 100%;
background: black;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Logo styling */
#logo {
display: none;
opacity: 0;
height: 10vh; /* 1/10th of viewport height */
margin: auto;
}
const lines = [
"Here's to the crazy ones.",
"The misfits.",
"The rebels.",
"The troublemakers.",
"The round pegs in the square holes.",
"The ones who see things differently.",
"They're not fond of rules.",
"And they have no respect for the status quo.",
"You can quote them, disagree with them,",
"glorify or vilify them.",
"About the only thing you can't do is ignore them.",
"Because they change things.",
"They push the human race forward.",
"And while some may see them as the crazy ones,",
"we see genius.",
"Because the people who are crazy enough to think they can change the world...",
"are the ones who do."
];
// Individual line display durations (in seconds)
const visibleDurations = [
2.8, // "Here's to the crazy ones."
1.2, // "The misfits."
1.2, // "The rebels."
1.5, // "The troublemakers."
2.5, // "The round pegs in the square holes."
2.5, // "The ones who see things differently."
1.8, // "They're not fond of rules."
2.5, // "And they have no respect for the status quo."
1.8, // "You can quote them, disagree with them,"
1.5, // "glorify or vilify them."
2.8, // "About the only thing you can't do is ignore them."
2.0, // "Because they change things."
2.0, // "They push the human race forward."
2.7, // "And while some may see them as the crazy ones,"
2.3, // "we see genius."
3.5, // "Because the people who are crazy enough to think they can change the world..."
3.8 // "are the ones who do."
];
const fadeInTime = 0.75 * 1000; // 0.75 second fade-in
const fadeOutTime = 0.75 * 1000; // 0.75 second fade-out
const logoDisplayTime = 3 * 1000; // 3 seconds for logo display
function showLine(index) {
if (index >= lines.length) {
showLogo();
return;
}
const container = document.getElementById('container');
const currentLine = lines[index];
const displayDuration = visibleDurations[index] * 1000; // Convert to milliseconds
// Set text content
container.textContent = currentLine;
// Fade in
container.style.opacity = '1';
// Schedule fade out after display duration
setTimeout(() => {
container.style.opacity = '0';
// Schedule next line after fade out completes
setTimeout(() => {
showLine(index + 1);
}, fadeOutTime);
}, displayDuration);
}
function showLogo() {
const container = document.getElementById('container');
const logo = document.getElementById('logo');
// Hide text container
container.style.display = 'none';
// Show and fade in logo
logo.style.display = 'block';
setTimeout(() => {
logo.style.opacity = '1';
}, 100);
// Keep logo visible for specified duration
setTimeout(() => {
// Logo remains visible - end of sequence
}, logoDisplayTime);
}
#container {
transition: opacity 0.75s ease-in-out;
}
#logo {
transition: opacity 0.75s ease-in-out;
}
<!-- Classic rainbow Apple logo -->
<a href="https://www.thecrazyones.it/spot-en.html" target="_blank" rel="noopener">
<img id="logo"
src="https://commons.wikimedia.org/wiki/Special:FilePath/Apple_Computer_Logo_rainbow.svg"
alt="Classic rainbow Apple logo">
</a>
rel="noopener" for security<!-- Favicon reference -->
<link rel="icon" href="https://commons.wikimedia.org/wiki/Special:FilePath/Apple_Computer_Logo_rainbow.svg" type="image/svg+xml">
/* Responsive typography */
#container {
font-size: 3vh; /* Viewport-relative sizing */
}
/* Logo scaling */
#logo {
height: 10vh; /* Proportional to viewport */
}
<img id="logo"
src="..."
alt="Classic rainbow Apple logo">
// Each line has individually calculated optimal reading time
const calculateOptimalTiming = (text) => {
const wordsPerMinute = 200; // Average reading speed
const words = text.split(' ').length;
const baseTime = (words / wordsPerMinute) * 60; // seconds
const minTime = 1.0; // Minimum display time
const maxTime = 4.0; // Maximum display time
return Math.max(minTime, Math.min(maxTime, baseTime * 1.5));
};
font-family: 'Apple Garamond', Garamond, serif;
This “Think Different” quote generator represents a masterful recreation of one of advertising’s most iconic campaigns. The combination of precise timing, authentic typography, and minimalist design creates an immersive experience that honors the original while demonstrating advanced web development techniques.
Technical Rating: 9.1/10
The application successfully captures the spirit and impact of Apple’s legendary campaign while showcasing modern web development capabilities.