AGENTS.md

1# AI Agent Instructions
2 
3## Project overview
4This is a static frontend demo for a magnetic 3D grid with a content preview overlay.
5The app is built with Parcel and vanilla JavaScript, using `gsap`, `imagesloaded`, and `splitting`.
6 
7## Key files
8- `src/index.html` — main HTML entry and preview item markup.
9- `src/css/base.css` — all demo styling.
10- `src/js/index.js` — runtime entry point and initialization.
11- `src/js/grid.js`, `src/js/gridItem.js`, `src/js/cursor.js`, `src/js/magneticFx.js`, `src/js/preview.js`, `src/js/utils.js` — main frontend modules.
12- `src/img/thumbs/` and `src/img/full/` — thumbnail and full preview images.
13 
14## Build and run
15- Install dependencies: `npm install`
16- Start local development server: `npm start`
17- Build production assets: `npm run build`
18 
19## Project conventions and notes
20- The demo uses Parcel for bundling and local dev serving; do not assume a separate backend.
21- Keep markup IDs and link targets in sync: each `.grid__item` anchor `href="#preview-X"` must match a `.preview__item` element with `id="preview-X"`.
22- `.grid__item` elements use `data-title` values for cursor text updates on hover.
23- JavaScript modules are ES modules imported from `src/js/index.js`; changes to import paths should preserve Parcel compatibility.
24 
25## When working on this repo
26- Focus on the `src/` folder for all behavior and layout changes.
27- Avoid adding unnecessary runtime frameworks; this repo is intentionally minimal.
28- There are no explicit test scripts in this project.
29 
30## Useful references
31- `package.json` scripts for development and build.
32- `README.md` for installation and demo context.
33