font-size: clamp(38px, 6vw, 68px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: 24px;
max-width: 950px;
}
.hero h1 .highlight {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: 19px;
color: var(--text-muted);
max-width: 680px;
margin-bottom: 36px;
line-height: 1.6;
}
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-secondary {
border: 1px solid var(--border);
color: var(--text);
background: var(--bg-card);
padding: 10px 22px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
font-size: 14px;
transition: all 0.2s;
}
.btn-secondary:hover {
background: var(--bg-card-hover);
border-color: rgba(255,255,255,0.2);
}
.section-header { margin-bottom: 40px; }
.section-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
display: block;
}
.section-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
margin-bottom: 80px;
}
.pillar-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
position: relative;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
overflow: hidden;
}
.pillar-card:hover {
transform: translateY(-4px);
border-color: var(--border-focus);
box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.pillar-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--accent-glow);
border: 1px solid var(--border);
display: grid;
place-items: center;
margin-bottom: 24px;
font-size: 22px;
color: var(--accent);
}
.pillar-tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-bottom: 12px;
display: block;
}
.pillar-card h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.pillar-card p {
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
margin-bottom: 20px;
}
.pillar-tech { display: flex; gap: 8px; flex-wrap: wrap; }
.tech-pill {
font-family: var(--font-mono);
font-size: 11px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
padding: 3px 10px;
border-radius: 6px;
color: #cbd5e1;
}
.spotlight-section { padding: 60px 0 80px; border-top: 1px solid var(--border); }
.spotlight-card {
background: linear-gradient(145deg, var(--bg-card), #0e121b);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
@media (max-width: 900px) { .spotlight-card { grid-template-columns: 1fr; } }
.spotlight-media {
background: #000;
position: relative;
min-height: 380px;
display: grid;
place-items: center;
border-right: 1px solid var(--border);
background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.12) 0%, #05070c 70%);
padding: 40px;
}
.media-badge {
position: absolute;
top: 20px;
left: 20px;
font-family: var(--font-mono);
font-size: 11px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 6px;
color: var(--accent);
}
.mockup-display { text-align: center; }
.mockup-visual {
font-size: 64px;
margin-bottom: 12px;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}
.mockup-caption {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
.spotlight-content {
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.spotlight-content h2 {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.spotlight-content p {
color: var(--text-muted);
font-size: 15px;
margin-bottom: 24px;
line-height: 1.6;
}
.meta-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 32px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.meta-item span {
display: block;
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.meta-item strong {
font-size: 15px;
color: var(--text);
font-weight: 600;
}
.pipeline-section { padding: 80px 0; border-top: 1px solid var(--border); }
.pipeline-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 40px;
}
.step-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
position: relative;
}
.step-num {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 700;
color: var(--accent);
margin-bottom: 12px;
}
.step-card h4 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
margin-bottom: 8px;
}
.step-card p {
color: var(--text-muted);
font-size: 13.5px;
line-height: 1.5;
}
.cta-banner {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
border: 1px solid var(--border-focus);
border-radius: 24px;
padding: 60px 48px;
text-align: center;
margin: 40px 0 100px;
position: relative;
overflow: hidden;
}
.cta-banner h2 {
font-family: var(--font-display);
font-size: 38px;
font-weight: 800;
margin-bottom: 16px;
letter-spacing: -0.02em;
}
.cta-banner p {
color: var(--text-muted);
font-size: 17px;
max-width: 580px;
margin: 0 auto 32px;
}
.studio-details {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 36px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-muted);
}
.studio-details a {
color: var(--accent);
text-decoration: none;
}
footer {
border-top: 1px solid var(--border);
padding: 40px 0;
color: var(--text-muted);
font-size: 13px;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
M
Mira Studios
Production
Bangor, Maine • Unreal Engine 5 • 3D Animation • Mascot IP
We engineer interactive worlds & unforgettable characters.
Mira Studios is a high-impact digital creative studio specializing in Unreal Engine 5 interactive development, custom 3D mascot IP, and stylized commercial animation.
Studio Capabilities
Built for high-fidelity storytelling.
Character IP & Branding
Custom 3D Mascots
From expressive concept sketches to fully rigged, game-ready 3D characters in Blender. We build iconic brand ambassadors and original IP that connect with audiences.
Blender Rigging
Concept Art
Texturing
Engineered Worlds
Unreal Engine 5 Game Dev
Architecting immersive gameplay systems with robust C++ and Blueprints. Creating performant, stylized environments and casual gaming experiences.
Unreal Engine 5
C++ Architecture
Lumen & Nanite
Dynamic Linear Media
Animated Explainers & Spots
Turning complex workflows and product narratives into punchy, high-conversion animated commercials and explainer videos that cut through the noise.
Motion Design
3D Storyboarding
Sound & Edit
Interactive Spotlight
In-Engine Production
UE5 • Indie Game Title
🐔 🏡
Backyard Birds • Casual UE5 Simulation
Backyard Birds
A cozy, stylized Unreal Engine 5 title centered around caring for backyard chickens. Built with custom gameplay loops, charming character animations, and responsive garden environments.
How We Work
The Studio Pipeline
01
Vision & Sketch
We nail down the character silhouettes, moodboards, gameplay premise, and emotional beat sheet.
02
3D Modeling & Rig
Sculpting clean topology in Blender, setting up flexible facial and body rigs engineered for animation.
03
Engine Integration
Importing assets into Unreal Engine 5 with custom shaders, physics, lighting, and C++ gameplay systems.
04
Polish & Delivery
Final audio design, camera work, rendering or packaged game builds ready for release or broadcast.
Let’s create something unforgettable.
Whether you need a custom 3D mascot, an animated commercial, or an Unreal Engine interactive experience, let’s build it together.
jeff@miratoons.com →
📍 Bangor, Maine
📞 +1 (818) 633-1672
💻 Unreal Engine 5 & Blender