// Omelette Studio — Design Components
// Shared components exported to window for use in Components.html
// ─── TOKENS ───────────────────────────────────────────────────
const T = {
white: '#FFFFFF',
offWhite: '#FAFAFA',
lightGrey: '#F2F2F2',
midGrey: '#D1D1D1',
darkGrey: '#6B6B6B',
nearBlack: '#1A1A1A',
black: '#0A0A0A',
coral: '#FF6C79',
serif: "'Fraunces', serif",
sans: "'Geist', sans-serif"
};
// ─── GOOGLE MEET ICON ─────────────────────────────────────────
function MeetIcon({ size = 18 }) {
return (
);
}
// ─── FIGMA ICON ───────────────────────────────────────────────
function FigmaIcon({ size = 18 }) {
return (
);
}
// ─── POINTER TILT HOOK ────────────────────────────────────────
function usePointerTilt(strength = 4) {
const ref = React.useRef(null);
const [offset, setOffset] = React.useState({ x: 0, y: 0 });
const [active, setActive] = React.useState(false);
const target = React.useRef({ x: 0, y: 0 });
const current = React.useRef({ x: 0, y: 0 });
const raf = React.useRef(null);
const running = React.useRef(false);
function lerp(a, b, t) {return a + (b - a) * t;}
function animate() {
current.current.x = lerp(current.current.x, target.current.x, 0.12);
current.current.y = lerp(current.current.y, target.current.y, 0.12);
const dx = Math.abs(current.current.x - target.current.x);
const dy = Math.abs(current.current.y - target.current.y);
setOffset({ x: current.current.x, y: current.current.y });
if (dx > 0.01 || dy > 0.01) {
raf.current = requestAnimationFrame(animate);
} else {
setOffset({ x: target.current.x, y: target.current.y });
current.current = { x: target.current.x, y: target.current.y };
raf.current = null;
running.current = false;
}
}
function startLoop() {
if (!running.current) {
running.current = true;
raf.current = requestAnimationFrame(animate);
}
}
function onMouseMove(e) {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = (e.clientX - cx) / (rect.width / 2);
const dy = (e.clientY - cy) / (rect.height / 2);
target.current = { x: dx * strength, y: dy * strength };
startLoop();
}
function onMouseLeave() {
target.current = { x: 0, y: 0 };
setActive(false);
startLoop();
}
React.useEffect(() => () => cancelAnimationFrame(raf.current), []);
const transform = `translate(${offset.x.toFixed(2)}px, ${offset.y.toFixed(2)}px)${active ? ' scale(0.97)' : ''}`;
return { ref, transform, onMouseMove, onMouseLeave, setActive };
}
// ─── PRIMARY BUTTON ───────────────────────────────────────────
// `fullWidth` makes the button stretch to fill its parent — used on mobile
// hero so the CTAs are easy tap targets and read as a clean vertical stack.
function PrimaryButton({ children, icon, onClick, fullWidth = false }) {
const [hovered, setHovered] = React.useState(false);
const tilt = usePointerTilt(4);
return (
);
}
// ─── SECONDARY BUTTON ─────────────────────────────────────────
function SecondaryButton({ children, icon, onClick, fullWidth = false }) {
const [hovered, setHovered] = React.useState(false);
const tilt = usePointerTilt(4);
return (
);
}
// ─── TEXT LINK ────────────────────────────────────────────────
function TextLink({ children, href = '#' }) {
const [hovered, setHovered] = React.useState(false);
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
fontFamily: T.sans, fontSize: 14, fontWeight: 500,
color: hovered ? T.coral : T.nearBlack,
textDecoration: 'underline',
textUnderlineOffset: 3,
transition: 'color 150ms ease',
cursor: 'pointer'
}}>
{children}
);
}
// ─── ICON CHIP ────────────────────────────────────────────────
// Same shape as Tag, but with a leading emoji/icon.
function IconChip({ icon, children }) {
return (
{icon}
{children}
);
}
// ─── DEFAULT TAG ──────────────────────────────────────────────
function Tag({ children, variant = 'default' }) {
const isSection = variant === 'section';
const isCoral = variant === 'coral';
return (
{children}
);
}
// ─── SECTION HEADER ───────────────────────────────────────────
function SectionHeader({ pill, headline, subhead, align = 'center' }) {
return (
{pill &&
{pill}}
{headline}
{subhead &&
{subhead}
}
);
}
function FloatingNavCTA() {
const [hovered, setHovered] = React.useState(false);
const tilt = usePointerTilt(4);
return (
);
}
function NavLink({ label, active, dark = false }) {
const [hovered, setHovered] = React.useState(false);
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
fontFamily: T.sans, fontSize: 14, fontWeight: 500,
color: dark ?
hovered ? T.white : 'rgba(255,255,255,0.55)' :
hovered ? T.nearBlack : T.darkGrey,
textDecoration: 'none',
transition: 'color 150ms ease, background 150ms ease',
padding: '6px 10px',
borderRadius: 9999,
background: dark && hovered ? 'rgba(255,255,255,0.1)' : 'transparent',
display: 'inline-block'
}}>
{label}
);
}
// ─── SERVICE PILL ─────────────────────────────────────────────
// The pill itself is transparent — the dark active state is drawn by a
// single sliding indicator inside ServicePillGroup, so the selected fill
// flows from pill to pill instead of popping.
const ServicePill = React.forwardRef(function ServicePill({ label, active, onClick }, ref) {
const [hovered, setHovered] = React.useState(false);
return (
);
});
// ─── SERVICE PILL GROUP ───────────────────────────────────────
// Segmented control: three pills in a grey rounded container, with a single
// dark "indicator" that slides between them. The indicator is absolutely
// positioned and animates `transform`+`width` to the active pill's bounds,
// so the selected state appears to flow from one option to the next.
function ServicePillGroup({ options, activeIndex, onChange }) {
const containerRef = React.useRef(null);
const pillRefs = React.useRef([]);
const [indicator, setIndicator] = React.useState({ x: 0, w: 0 });
// Suppress the first transition so the indicator doesn't visibly slide in
// from x=0 on initial paint.
const [ready, setReady] = React.useState(false);
const measure = React.useCallback(() => {
const active = pillRefs.current[activeIndex];
if (!active || !containerRef.current) return;
const c = containerRef.current.getBoundingClientRect();
const a = active.getBoundingClientRect();
setIndicator({ x: a.left - c.left, w: a.width });
}, [activeIndex]);
React.useLayoutEffect(() => {
measure();
if (!ready) requestAnimationFrame(() => setReady(true));
}, [measure, ready]);
React.useEffect(() => {
if (!containerRef.current) return;
const ro = new ResizeObserver(measure);
ro.observe(containerRef.current);
return () => ro.disconnect();
}, [measure]);
return (
{/* Sliding active indicator */}
{options.map((label, i) =>
(pillRefs.current[i] = el)}
label={label}
active={activeIndex === i}
onClick={() => onChange(i)} />
)}
);
}
// ─── SERVICE CARD ─────────────────────────────────────────────
function ServiceCard({ title, price, description, commitment, commitmentIcon, bullets, goodFit, cta, ctaIcon, darkRight = false, animKey = 0 }) {
const rightBg = darkRight ? T.nearBlack : T.offWhite;
const rightFg = darkRight ? T.white : T.nearBlack;
const rightMuted = darkRight ? 'rgba(255,255,255,0.55)' : T.darkGrey;
const rightDivider = darkRight ? 'rgba(255,255,255,0.85)' : T.darkGrey;
const viewport = useViewport();
const isMobile = viewport === 'mobile';
const isTablet = viewport === 'tablet';
const [includedOpen, setIncludedOpen] = React.useState(false);
// Both columns settle upward; right column is staggered behind for a hand-crafted feel.
const leftSlot = {
animation: 'serviceContentSettle 520ms cubic-bezier(0.22, 1, 0.36, 1) both'
};
const rightSlot = {
animation: 'serviceContentSettle 520ms cubic-bezier(0.22, 1, 0.36, 1) both',
animationDelay: '80ms'
};
return (
{/* LEFT COLUMN */}
{title}
{commitmentIcon ? (
{commitment}
) : (
{commitment}
)}
{description}
{isMobile ? (
<>
{bullets.map((b, i) =>
✓
{b}
)}
) : (
<>
What's included
{bullets.map((b, i) =>
✓
{b}
)}
)}
{/* RIGHT COLUMN — frame stays stable, content animates */}
Good fit if
{goodFit.map((g, i) =>
·
{g}
)}
Investment
{price}
{darkRight ? (
) : (
window.open('https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ00n5Nw2R8lWu16_fpqRwWSzuzb-ujZ2OnoDn4zrlHL1Kla_OLocuHa_AG52BmmUXLiDMYFyL__', '_blank')}>{cta}
)}
{items.map((item, i) =>
setActive(i)}
isLast={i === items.length - 1} />
)}
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
padding: 24,
borderBottom: isLast ? 'none' : `1px solid ${T.lightGrey}`,
cursor: 'pointer',
background: hovered && !isOpen ? T.lightGrey : 'transparent',
transition: 'background 150ms ease'
}}>
{step}
{title}
{/* Left: context 40% */}
{tags.map((t) => {t})}
{title}
{quote &&
"{quote}"
}
{clientName &&
{clientName}
{clientTitle}
}
{/* Right: screenshots 60% */}
{images.map((img, i) =>
{img.placeholder &&
{img.placeholder}
}
)}
Companies We've Worked With
{logos.map((logo, i) =>
)}
);
}
function LogoPlaceholder({ name, width }) {
const [hovered, setHovered] = React.useState(false);
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
opacity: hovered ? 1 : 0.4,
transition: 'opacity 200ms ease',
cursor: 'default',
filter: 'grayscale(1)',
height: 28,
width: width,
background: T.nearBlack,
borderRadius: 3,
display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
{name}
);
}
// ─── CTA SECTION ──────────────────────────────────────────────
function CTASection() {
return (
Ready to build something worth noticing?
Let's talk about your project. No decks, no discovery calls. Just a direct conversation.
or email hello@theomelette.ca
);
}
// ─── FOOTER ───────────────────────────────────────────────────
function Footer() {
const cols = [
{
header: null,
content:
A small design studio making digital products that work.
},
{
header: 'Navigation',
links: ['Services', 'Process', 'Work']
},
{
header: 'Contact',
links: ['hello@theomelette.ca', 'LinkedIn', 'Book a Call']
}];
return (
);
}
function FooterLink({ children }) {
const [hovered, setHovered] = React.useState(false);
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
fontFamily: T.sans, fontSize: 14, fontWeight: 400,
color: hovered ? T.white : 'rgba(255,255,255,0.7)',
textDecoration: 'none',
transition: 'color 200ms ease'
}}>
{children}
);
}
// ─── VIEWPORT HOOK ────────────────────────────────────────────
// Returns 'mobile' | 'tablet' | 'desktop' based on window width.
// Breakpoints match the design tokens: <768 mobile, 768-1023 tablet, ≥1024 desktop.
function useViewport() {
const get = () => {
if (typeof window === 'undefined') return 'desktop';
const w = window.innerWidth;
if (w < 768) return 'mobile';
if (w < 1024) return 'tablet';
return 'desktop';
};
const [v, setV] = React.useState(get);
React.useEffect(() => {
const onResize = () => setV(get());
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return v;
}
// ─── EXPORTS ──────────────────────────────────────────────────
Object.assign(window, {
T,
useViewport,
MeetIcon, FigmaIcon,
PrimaryButton, SecondaryButton, TextLink,
Tag, IconChip, SectionHeader,
TopNav, NavLink,
ServiceCard, ServicePillGroup,
Accordion, AccordionItem,
ProjectBlock,
StandaloneTestimonial,
ClientLogoStrip,
CTASection,
Footer
});