Make it yours.

All creator content is organized in app/creator-templates.json. Find the entry named FRAME. Change content there, then run npm run templates:build. A readable copy of this template’s current configuration is available as content.json; the source file is the file to edit.

Your identity

Replace creator, tagline, intro, biography, location, email, and socials. The palette object controls the page background, text, accent, borders, muted text, and soft surfaces using six-digit hex colors. Keep the template slug stable if you have shared its route. Social links are hidden until real profile URLs are added.

Your work

The projects array contains six independent slots. Replace poster, title, category, type, brief, deliverables, approach, and role. Set format to vertical (9:16), landscape (16:9), or portrait (3:4). Use descriptive alt text. Add MP4 or WebM URLs to video to enable native playback controls. Keep each poster and video in the same aspect ratio.

Use 1080 × 1920 for vertical video, 1920 × 1080 for landscape video, and 1200 × 1600 for portraits. Short portfolio edits of 10–30 seconds work well. All current video fields are empty: the preview uses original generated concept photos, not filmed campaign work.

Opening scene

Each template has an independent layout in scripts/creator-layouts. MUSE uses an interactive physical-print treatment. SOCIAL CLUB uses a dimensional mosaic. FRAME uses a WebGL gallery glide with a full-width poster fallback. DAYLIGHT uses a separate tabletop vignette. These are stylized real-time scenes, not photorealistic footage. Entrance animations run once, independently of scrolling; reduced-motion visitors see a settled still. FRAME’s three screen buttons open their projects. Optional showreel and showreelPoster fields add a user-controlled reel below the opening.

Inquiry delivery

No submission service is connected in this demonstration. Add a real business email for the email-app fallback, or set formEndpoint to an HTTPS submission service that accepts JSON. The form only confirms a successful submission after an HTTP success response. Test delivery to your inbox before launching. Without either, visitors can prepare and copy a brief, but it is not sent.

Optional sections

Services have editable price fields. Set showPrices to true to display them. testimonials, clientLogos, audienceInsights, socials, and mediaKit are empty and hidden. Only add verified quotes, approved logos, current audience figures, and a real media-kit file. Remove demonstration wording when you have replaced all sample content with your own.

Files

Content: app/creator-templates.json
Structure: scripts/generate-creator-templates.mjs
Appearance: public/template-assets/creators/creators.css
Interactions: creators.js
Dimensional scenes: scenes.js

Changing names, images, services, prices, and contact information does not require editing animation code.