Frame

About This Template

Frame is an editorial portfolio template for photographers, motion directors, and visual studios. Seven pages cover a project catalog with grid/list toggle and category filters, project detail pages with asymmetric masonry galleries, a journal section, studio information, and contact. Hover any project row in list view and a ghost image appears — tracking your cursor with elastic lag via GSAP QuickTo, creating a tactile preview without leaving the page. A fixed scroll counter (00–99%) ticks in the top-right corner. Project detail pages open with a full-bleed cover and reveal asymmetric gallery images via clip-path scroll triggers. Warm off-white background with terracotta rust accent, SVG grain texture overlay, Lenis smooth scroll, and Astro View Transitions throughout.

Signature

Hover any project row in list view and a ghost image appears — tracking your cursor with elastic lag via GSAP QuickTo. The image follows with a 0.35s spring delay, creating a tactile preview without leaving the page. Combined with a fixed scroll counter (00–99%) and clip-path gallery reveals that wipe images into view on scroll, Frame feels like a digital gallery, not a website.

Features

• 7 complete pages — Home, Project Detail, Journal, Journal Article, Information, Contact, 404
• Ghost cursor preview — GSAP QuickTo elastic image tracking on list row hover
• Grid/list view toggle with category filters (stills, motion, culture)
• Scroll counter (00–99%) fixed in the top-right corner, driven by ScrollTrigger
• Asymmetric masonry gallery with clip-path scroll reveal animations on project detail pages
• 2 content collections — Projects (8 entries) and Journal (4 articles) in Markdown
• Prev/next project navigation on detail pages
• SVG grain texture overlay (fractalNoise at 4% opacity) for editorial feel
• Contact form with Formspree integration — swap the endpoint to go live
• Journal/blog with reading time estimation and hover image preview
• Lenis smooth scroll + Astro View Transitions with ClientRouter
• 27 Unsplash-licensed images included — optimized to WebP, ready to ship
• SEO optimized — JSON-LD, Open Graph, canonical URLs, sitemap, robots.txt, llms.txt
• Conditional Google Analytics (GA4) — loads only when env variable is set
• Fully responsive at 375px, 768px, and 1440px breakpoints
• TypeScript strict mode — zero any, zero build warnings

Deployment