Shared visual effects, motion, and UI primitives for every J·A·T Industries subsidiary website. Each site imports two files from this CDN, defines its palette via CSS custom properties, and gets the full standard.
Canonical implementation: www.jatindustries.com. Spec: Notion page.
<html lang="en" data-jat-brand="ELAN">
<head>
<link rel="stylesheet" href="https://jat-standard.pages.dev/jat-standard.css">
<style>
:root {
--jat-bg: #FAF8F4;
--jat-bg-2: #F5EFE3;
--jat-bg-card: #FFFFFF;
--jat-text: #1B2332;
--jat-text-mid: rgba(27,35,50,0.6);
--jat-text-faint: rgba(27,35,50,0.4);
--jat-border: rgba(27,35,50,0.1);
--jat-accent: #C6993A;
--jat-accent-2: #D4AD55;
--jat-accent-deep: #9E7A2D;
--jat-accent-glow: rgba(198,153,58,0.32);
--jat-blend: multiply;
}
</style>
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<script>
window.JAT_CONFIG = {
chatEndpoint: 'https://jat-chat.jibreeltalbot2013.workers.dev/',
easterEgg: 'LIVE',
easterEggMessage: 'Live Life ✦',
email: 'hello@elan.bm',
shareText: 'Élan — Bermuda concierge & property management.'
};
</script>
<script src="https://jat-standard.pages.dev/jat-standard.js"></script>
</body>
</html>
That's it. The bundle injects all background canvases, chrome (chips/audio/chat/online count/easter-egg), wires up auto-tilt + reveal + cursor + magnetic + scramble + counters + section progress + scroll bar. Brand persona for the AI chat is picked from data-jat-brand.