Current Club Free

A complete cinematic portfolio for filmmakers, image studios and creative directors. Your next first edit is below. The original is always one Reset away.

Choose your edition

Framer: one independent, editable code component containing the complete one-page website. Its HTML, styling and interactions run inside an automatically sized frame. Standalone: the complete HTML/CSS/JavaScript website and an offline content editor. Both editions include the original artwork.

Make the first edit offline

1. Extract the whole ZIP, then open EDIT-CONTENT.html in a current browser.
2. Change Studio name, Opening headline, Introduction and Contact email. Your live preview updates immediately.
3. Choose Opening image, First study or Second study, then upload a PNG, JPEG or WebP under 10 MB. It stays in your browser and is embedded in the exported website. The third vector study remains editable in its SVG source.
4. Select Phone width to inspect the narrow preview. Save draft on this device to keep working later; local storage belongs to that browser. Reset restores the original content and removes the saved draft.
5. Choose Download edited website for a single HTML file with its artwork, CSS and interactions embedded. Open the exported file to check your final copy, contact and images, then upload it to your chosen static website host.

The editor changes these four text fields and three image slots. For further project titles, stories, notes or section copy, edit index.html and site.js, or the corresponding content inside CurrentClub.tsx. The editor export and Framer component are separate editions; an edit in one does not update the other.

Install in Framer

Insert CurrentClub into your own Framer project

Exact installation link: https://framer.com/m/CurrentClub-ztOoK9.js@K55RBgHy9EtdPiWyknp8. Also saved in delivery-links.json.

1. Sign in to your Framer account, open the installation link and insert the component onto your own blank page. This installs only this website component.
2. Set width to Fill and height to Fit Content. Use the native Studio name, Headline, Introduction and Contact email controls, plus Opening image, First study and Second study.
3. For email contact, leave Contact link empty and replace hello@example.com in Contact email. To use your own booking or enquiry page, set Contact link and Link label instead. A set Contact link overrides the email action.
4. To edit every section or project story, create your own Framer code file with the supplied CurrentClub.tsx source and insert that component. The artwork and default text are inside the same file. Framer native canvas layers and CMS editing are not used by this edition.
5. Preview your own desktop and phone content, inspect the contact action, then publish from your Framer account. Hosting and domains follow your chosen Framer plan.

Take it for a short walk

• Choose the Director's reel or Contact sheet. Select a study by clicking a frame, using Previous / Next, or focusing the reel and using Arrow keys, Home or End.
• The reel also supports a horizontal pointer swipe. Adjust Preview colour to inspect the studies with less or more colour.
• Choose Open the study for a closer view and Escape to close. Explore the practice accordions and footer motion control.

Automatic motion follows the document being scrolled. The standalone website uses native scroll timelines; unsupported browsers keep a still view. The auto-sized Framer edition keeps the hero still when its own frame does not scroll. The gallery, reel and preview controls remain fully manual, and the footer pause control respects system reduced-motion preferences.

Your files

• index.html, site.css, site.js and assets/: independent website source; keep these together.
• EDIT-CONTENT.html: self-contained offline content editor.
• CurrentClub.tsx: independent Framer component source; its default PNG artwork uses Wuren's public CDN until you replace it.
• README.txt, ART-INDEX.json, delivery-links.json, this guide and LICENSE.txt: installation, artwork and use notes.

Original artwork and use

The sample studio, projects and depicted people are fictional. The three PNG studies were created with AI assistance; the SVG study uses original editable vector paths. Their roles and filenames are listed in ART-INDEX.json. Free use includes multiple completed personal, commercial and client websites. Credit is optional. Do not repackage or redistribute the reusable source or installation links as another template or asset library.

Need help?

Use this guide for self-serve setup. Wuren handles download access and reproducible product defects through its published seller contact. A useful defect report includes the file, browser and steps that reproduce the issue.