Give your work
some daylight.

Ember Index Free is a complete one-page creative-studio website. You get a Framer component-based template and a separate HTML version. The amber light is included. Your studio name is up to you.

Open the HTML website · Read the free commercial-use license

Choose your version

The Framer version contains four code components rather than a whole-project remix. You install them into your own project; this download does not copy the Wuren Studio shop or require access to our account.

Build the Framer page

1. Open your own Framer project and add a blank page.
2. Set the page to a vertical stack with 0 gap, full width and content-based height. Use the graphite background #1c1d20.
3. Insert the four components in this order: EmberCover → EmberWorks → EmberStory → EmberClosing. Set each instance to Fill width and Fit content height.
4. The component links are recorded in delivery-links.json. The source installation below works independently of hosted links.
5. Preview at desktop, tablet and phone widths before publishing.

Install from source

1. In Framer's code area, create a new code file for EmberCover.tsx.
2. Open the matching file from the extracted components/ folder, copy its entire contents and replace the new file's contents.
3. Repeat for EmberWorks.tsx, EmberStory.tsx and EmberClosing.tsx. Each source file stands on its own.
4. Insert each component from your project's Assets panel and arrange them in the order above.

Make it your studio

Use image controls to upload your own work. The portrait belongs to the cover; the next section deliberately opens with different artwork. Keep that distinction when you replace the examples.

Replace mailto:hello@example.com in EmberClosing with your own email, booking link or contact page. The example does not include a message-sending backend. A valid email link opens the visitor's email app; a booking URL opens your chosen service.

Keep the default anchors #ember-top, #ember-work, #ember-studio and #ember-contact for the complete one-page website. If a component lives on another page, set its navigation properties to that page's full URL and anchor.

Typography and motion

Studio fonts loads Barlow Condensed, Syne and DM Sans from Google Fonts. Turn it off to choose heading and body fonts through the Framer Font controls. System fallbacks remain available if the external fonts do not load. Font software is not bundled.

The cover responds to normal scrolling, with a visible pause button. The notebook turns when a visitor chooses a page. Motion switches and the visitor's reduced-motion preference keep the experience usable. The examples do not require a 3D engine or a custom cursor.

Use the HTML website

1. Extract the ZIP and open index.html. Keep the folders together.
2. Edit site-config.js in a text editor. Replace the brand, hero headline, intro, contact link, works, story text and service descriptions. Keep three story objects for the three notebook tabs in this HTML edition.
3. For new work, place your images in assets/ and set the entry's image path. The category value becomes a filter tab automatically.
4. Edit the page title and meta description in index.html. Change the remaining headings, navigation labels and example note there if needed.
5. Upload index.html, site.css, site.js, site-config.js, story-art.js and the assets/ folder to your own website host. Open the published page and test the links.

The local HTML version works without an internet connection using system fonts. Google Fonts load when a connection is available. There is no account, tracking service or external script dependency in the template.

Try the interactions

• Choose Object, Space or Identity to filter the work. Use Left / Right, Home and End on the filter tabs.
• Open a case study with a click or Enter. Close it with the button or Escape; focus returns to its opening button.
• Turn the notebook with tabs or Previous / Next. Its tabs also support Left / Right, Home and End.
• Follow Work, Studio, Contact and the brand link to check the page anchors.
• Use a narrow preview to check the stacked layout, image crop and contact button.

Examples, license and help

The performer, sculpture and architectural room are original AI-assisted fictional studies. The optical poster and notebook diagrams are original vector artwork. They are example work, rather than actual client projects or endorsements. You can keep, adapt or replace them within finished projects under the included license.

You may use this free kit for multiple completed personal or commercial websites, including client work. Credit is optional. Keep the reusable template, components and source kit out of resale packs and resource libraries. See LICENSE.txt for the terms.

Wuren Studio handles access issues and reproducible defects through the support contact supplied with your download. Include the component, browser and steps that caused the issue. Everyday editing is covered here; custom design and one-to-one training are not part of this free kit.