/* global React, useScrollY, useReveal, clamp */
const { useState: heroUseState, useEffect: heroUseEffect, useRef: heroUseRef, useMemo: heroUseMemo } = React;
function Hero({ tagline, heroLayout, motion }) {
// Headline content per tagline tweak
const headline = heroUseMemo(() => headlineFor(tagline), [tagline]);
const sub = "Fika Design Co. is a Sweden-based product design studio. We design and build digital products — for our own portfolio and for the clients we work with. Our services span product design, design engineering, content design, UX writing, and context engineering.";
// Shared bits
const ctas =
;
if (heroLayout === "type") return ;
if (heroLayout === "kinetic") return ;
if (heroLayout === "skouta-peek") return ;
if (heroLayout === "canvas") return ;
return ;
}
// Headline data: { pre: array of words, emphasis: word with wonk italic, post: array }
function headlineFor(tagline) {
switch (tagline) {
case "A":return { pre: ["Design", "built", "to"], emphasis: "ship.", post: [] };
case "B":return { pre: ["Small", "studio."], emphasis: "Real products.", post: [] };
case "C":return { pre: ["Deliberate", "design."], emphasis: "Real products.", post: [] };
default:return { pre: ["A", "design", "studio", "that"], emphasis: "ships.", post: [] };
}
}
/* ============================================================
Hero variant A — Editorial type. Massive Fraunces, no image.
Kinetic word treatment + scroll parallax of word baseline.
============================================================ */
function HeroType({ headline, sub, ctas, motion }) {
const y = useScrollY();
const parallax = motion === "off" ? 0 : motion === "subtle" ? y * 0.05 : y * 0.18;
const fade = motion === "off" ? 1 : clamp(1 - y / 600, 0, 1);
return (
);
}
/* ============================================================
Hero variant B — Type with a kinetic orange mark that grows
============================================================ */
function HeroKinetic({ headline, sub, ctas, motion }) {
const y = useScrollY();
const scale = motion === "off" ? 1 : 1 + clamp(y / 800, 0, 0.6);
const rot = motion === "off" ? 0 : clamp(y / 16, 0, 60);
return (
);
}
/* ============================================================
Hero variant C — Type + a tall iPhone product peek (Skouta)
============================================================ */
function HeroSkoutaPeek({ headline, sub, ctas, motion }) {
const y = useScrollY();
const phoneY = motion === "off" ? 0 : -y * 0.15;
const phoneRot = motion === "off" ? -6 : -6 + clamp(y / 60, 0, 4);
return (
Skouta · iOS first, Android soon
);
}
/* ============================================================
Hero variant D — Motion canvas: animated orange shapes behind type
============================================================ */
function HeroCanvas({ headline, sub, ctas, motion }) {
const y = useScrollY();
return (
);
}
/* ============================================================
Shared bits
============================================================ */
function HeroMetaRow({ motion }) {
const ref = useReveal();
return (
Sweden · Est. 2026
Product · Engineering · Content · Writing · Context
);
}
/**
* HeadlineKinetic — renders headline words with the emphasis word in orange
* wonk-italic Fraunces. (Previously animated; animations don't reliably play
* in hidden iframes so we render statically — the type does the work.)
*/
function HeadlineKinetic({ headline, motion }) {
return (
{headline.pre.map((w, i) =>
{w}
)}
{headline.emphasis}
{(headline.post || []).map((w, i) =>
{w}
)}
);
}
function ScrollHint({ motion, fade }) {
if (motion === "off") return null;
return (
Scroll
);
}
function Marquee({ motion }) {
const items = ["Product design", "Design engineering", "Content design", "UX writing", "Context engineering", "Product design", "Design engineering", "Content design", "UX writing", "Context engineering"];
return (
{[0, 1].map((set) => items.map((it, i) =>
{it}
))}
);
}
/* Kinetic mark: morphing coral squircle with Fika wordmark on top + orbiting dot */
function KineticMark({ scale, rot, motion }) {
return (
{/* Morphing coral squircle (background) */}
{/* Wordmark on top — rides the same scroll-driven transform so it stays
locked to the morphing squircle behind it. */}
{/* Small orbiting espresso dot */}
{/* Inner screen — image-slot fills the phone. Host background
matches the bezel so the rounded corners blend in instead of
flashing the slot's default light backing color. */}
{/* Notch overlay on top of the slot */}
);
}
Object.assign(window, { Hero, SkoutaPhonePreview });