MOTIVATE STUDIOS · WEBSITE KIT
Brand guidelines: https://motivate-web.web.app/brand   ·   work@motivate.works

The website's own design system and motion, for developers and for anyone
rebuilding a Motivate page in another tool.

  tokens/motivate-tokens.css    every CSS custom property (light + dark)
  tokens/motivate-tokens.json   the same values as JSON, plus the font stack
  css/keyframes.css             the 7 @keyframes the site uses
  css/system.css, controls.css  the full stylesheets as shipped
  js/motion.js                  reveals, count-up, glass, orb, page transition, filters (no dependencies)
  js/liquid.js                  the WebGL liquid light behind the home hero (no dependencies)
  recordings/                   each web animation recorded frame by frame:
                                .webm with alpha where it has a transparent background, .mp4 otherwise

HOW TO USE
  - Link the Google Fonts CSS in tokens/motivate-tokens.json, then tokens/motivate-tokens.css.
  - motion.js runs on its own: add data-reveal to an element to reveal it on scroll,
    data-count="500" data-suffix="+" to count up, class "glass" + data-glass for the glass panels.
  - liquid.js paints any <canvas class="liquid" data-liquid>; it pauses off screen and
    stands still under prefers-reduced-motion.
  - Keep the timings: 180 ms for small UI, 420 ms for moves, 900 ms for reveals, easing
    cubic-bezier(.16, 1, .3, 1).

DON'T
  - add bounce or elastic easing, or run reveals longer than 900 ms
  - animate for users who ask for reduced motion (the scripts already respect it)
  - hot-link these files from motivate-web.web.app — copy them into your own project

------------------------------------------------------------------------------
ชุดเว็บไซต์ MOTIVATE STUDIOS: ค่ามาตรฐาน (tokens) แบบ CSS/JSON, keyframes, สไตล์ชีตทั้งหมด,
motion.js และ liquid.js ของเว็บจริง พร้อมไฟล์บันทึกแอนิเมชันทุกตัว
ใช้ easing cubic-bezier(.16, 1, .3, 1) และเวลา 180 / 420 / 900 ms ตามเดิม
ห้ามใส่ easing แบบเด้ง และต้องเคารพการตั้งค่า reduced motion ของผู้ใช้ (สคริปต์รองรับแล้ว)
