TEMPLATE INSTRUCTIONS
1. Where the Code Is Located
All behaviour lives under src/, in three groups: UI (navigation, dropdowns, tabs, slider, accordion), Motion (scroll reveals and counters) and Forms (validation and success states). Each interactive component carries its own
<script>; the engines they share — motion.ts, tabs.ts and form.ts — live in src/scripts/. The scroll reveals are started once from src/layouts/Base.astro. Without JavaScript, or with reduced motion on, nothing is ever hidden.2. Scroll Reveal Animations
Any element with a data-reveal attribute fades and rises into view when scrolled to. Use
data-reveal="scroll-one" through scroll-four to stagger a group (0s, 0.2s, 0.4s and 0.6s respectively), or fade-two for a shorter rise. Timings live in src/styles/variables.css as --bx-reveal-duration, --bx-ease-reveal and --bx-reveal-distance, so the whole system can be retuned in one place.3. Counter Animation
Numbers count up when they enter the viewport. Set the final value with target:
The figures shipped with this template are placeholders — replace them with your own before launch.
<CountUp target={125} class="…" />The figures shipped with this template are placeholders — replace them with your own before launch.
4. Forms
Forms validate in the browser and show the success panel without sending anything. To connect a real endpoint, send your request from the submit handler in
src/scripts/form.ts, where the comment marks the spot. Until then every form is safe to click.5. Best Practice
If you duplicate a section: keep the same class names, and keep the data-reveal attribute. You do not need to start the motion engine again — the call in
src/layouts/Base.astro covers every page, and it picks up anything added to the document afterwards.