// scenes.jsx — Yuan Packaging homepage build animation (compact 880×660).
// Sized for a small portfolio-card slot: chips and type are large enough to read.
const BLUE = '#1F4FCE';
const BLUE_LITE = '#4A78E8';
const BLUE_DARK = '#0E2E8A';
const BLUE_BTN = 'linear-gradient(180deg, #4A78E8 0%, #1F4FCE 100%)';
const INK = '#0B1F4A';
const INK_2 = '#3B4A6B';
const INK_3 = '#7A8497';
const PAGE = '#FFFFFF';
const LINE = '#E6E8EE';
const BAND = '#F5F7FB';
// Page stays static — no camera moves. Cleaner read at small sizes.
// ─────────────────────────────────────────────────────────────────
function BrowserChrome({ width, height }) {
const t = useTime();
const chromeProg = Easing.easeOutCubic(clamp(t / 0.8, 0, 1));
return (
{['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => {
const op = clamp((t - 0.1 - i * 0.06) / 0.3, 0, 1);
return (
);
})}
{(() => {
const url = 'yuanpackaging.com';
const chars = Math.floor(clamp((t - 0.4) / 0.9, 0, 1) * url.length);
return url.slice(0, chars) + (chars < url.length ? '|' : '');
})()}
);
}
function CameraPage({ width, height }) {
const t = useTime();
const pageProg = Easing.easeOutCubic(clamp((t - 0.6) / 0.6, 0, 1));
return (
);
}
// ─────────────────────────────────────────────────────────────────
function NavBar() {
const t = useTime();
// Compact: trim to 4 links + 中文
const links = ['Home', 'Products', 'About', 'Contact'];
const logoOp = Easing.easeOutCubic(clamp((t - 0.9) / 0.4, 0, 1));
return (
Yuan Packaging
{links.map((label, i) => {
const start = 1.0 + i * 0.07;
const op = Easing.easeOutCubic(clamp((t - start) / 0.3, 0, 1));
const isHome = label === 'Home';
return (
{label}
);
})}
{(() => {
const op = Easing.easeOutCubic(clamp((t - 1.4) / 0.4, 0, 1));
return (
中文
);
})()}
);
}
// ─────────────────────────────────────────────────────────────────
function Hero() {
const t = useTime();
// Slide hero left to make room for the chip column when chips appear
const slideOut = Easing.easeInOutCubic(clamp((t - 4.6) / 0.8, 0, 1));
return (
);
}
function HeroCopy() {
const t = useTime();
const words = [
{ text: 'Premium ', t: 1.5, blue: false },
{ text: 'Packaging', t: 1.85, blue: true },
];
const w3 = { text: 'Solutions', t: 2.25, blue: false };
const subOp = Easing.easeOutCubic(clamp((t - 2.7) / 0.6, 0, 1));
const ctaA = Easing.easeOutBack(clamp((t - 3.1) / 0.6, 0, 1));
const ctaB = Easing.easeOutBack(clamp((t - 3.3) / 0.6, 0, 1));
return (
{words.map((w, i) => {
const op = Easing.easeOutCubic(clamp((t - w.t) / 0.45, 0, 1));
return (
{w.text}
);
})}
{(() => {
const op = Easing.easeOutCubic(clamp((t - w3.t) / 0.45, 0, 1));
return (
{w3.text}
);
})()}
Elevating your products with innovative,
sustainable packaging solutions.
Explore Products
Get a Quote
);
}
// ─────────────────────────────────────────────────────────────────
function HeroBottle() {
const t = useTime();
const start = 1.8;
const prog = Easing.easeOutCubic(clamp((t - start) / 1.2, 0, 1));
const swayY = Math.sin((t - start) * 0.55) * 5;
const swayR = Math.sin((t - start) * 0.4) * 0.5;
const glowBoost = Easing.easeInOutCubic(clamp((t - 5.0) / 1.2, 0, 1));
const glowOpacity = 0.18 + 0.12 * glowBoost + 0.04 * Math.sin(t * 1.4);
return (
);
}
function Sparkles({ t, active }) {
if (active < 0.05) return null;
const stars = [
{ x: -130, y: -110, phase: 0.0, size: 7 },
{ x: 100, y: -150, phase: 1.2, size: 6 },
{ x: 140, y: 30, phase: 2.4, size: 6 },
{ x: -150, y: 60, phase: 0.7, size: 5 },
];
return (
{stars.map((s, i) => {
const blink = (Math.sin(t * 2.4 + s.phase) + 1) / 2;
const op = active * (0.4 + 0.6 * blink);
return (
);
})}
);
}
// ─────────────────────────────────────────────────────────────────
// Trust chips — stacked vertically on the right, easy to scan.
// Bottle slides left to make room; chips enter top→bottom in sequence.
const CHIPS = [
{ label: 'ISO 9001 certified', icon: 'shield', t: 5.2 },
{ label: '40 years in operation', icon: 'building', t: 5.55 },
{ label: 'FDA food-grade materials', icon: 'check', t: 5.9 },
{ label: '14-day lead time', icon: 'clock', t: 6.25 },
{ label: 'Trade partners · 12 markets', icon: 'globe', t: 6.6 },
];
function TrustChips() {
const t = useTime();
const veilProg = clamp((t - 4.6) / 0.6, 0, 1);
const exitFade = clamp((t - 9.5) / 0.6, 0, 1);
return (
{(() => {
const op = Easing.easeOutCubic(clamp((t - 4.6) / 0.5, 0, 1));
return (
);
})()}
{/* Stacked chip column on the right */}
{CHIPS.map((chip, i) => (
))}
);
}
function Chip({ label, icon, t: tIn, now, index }) {
const prog = Easing.easeOutBack(clamp((now - tIn) / 0.6, 0, 1));
const op = Easing.easeOutCubic(clamp((now - tIn) / 0.4, 0, 1));
const floatT = Math.max(0, now - tIn - 0.6);
const float = Math.sin(floatT * 1.1 + index * 0.7) * 1.5;
const landAge = now - tIn - 0.4;
const pulse = landAge >= 0 && landAge < 0.7 ? landAge / 0.7 : -1;
return (
{pulse >= 0 && (
{label}
);
}
function ChipIcon({ kind }) {
const wrap = (svg) => (
{svg}
);
const stroke = { stroke: '#fff', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (kind) {
case 'shield':
return wrap(
);
}
function TimestampLabel() {
const t = useTime();
React.useEffect(() => {
const root = document.querySelector('[data-anim-root]');
if (root) root.setAttribute('data-screen-label', `t=${t.toFixed(1)}s`);
}, [Math.floor(t)]);
return null;
}
function YuanScene({ width, height }) {
return (
);
}
Object.assign(window, {
YuanScene, BLUE, BLUE_DARK, INK, INK_2, PAGE, LINE, BAND,
});
Yuan Packaging
