Wuren Studio / Aperture Deck Free

Let the image
have a second side.

Aperture Deck is an expandable image component with three concertina folds. Choose a fold, move the image focus and turn it over for the story. Your work has more to say than a thumbnail can manage.

Open the working offline example ยท Free commercial-use license

Install in Framer

  1. Open your own Framer project and choose the page where you want the deck.
  2. Use the current insert link recorded in delivery-links.json, or install the included source using the steps below.
  3. Set the component to Fill width and Fit content height. It contains its own heading, image deck, controls and notes.
  4. Preview at desktop, tablet and phone sizes, then replace the example images and links.

Install from source

  1. Create a new code file in Framer and name it ApertureDeck.tsx.
  2. Open the included file in a text editor. Copy its entire contents into the new Framer file.
  3. Insert ApertureDeck from your project's Assets panel.

This is one independent code component. You do not need to remix the Wuren Studio shop or request access to our project.

Replace the content

SettingWhat it changes
Brand, heading and introThe small brand link and the large introduction above the folds.
PanelsUp to three image studies. Each has a title, category, image, summary, reverse-side title and story, material, approach and destination link.
Initial focusThe starting crop position. Reset the view returns each fold to this value.
MotionTurns animated fold and flip transitions on or off. The reader's controls continue to work.
Studio fontsLoads Syne, DM Sans and Barlow Condensed from Google Fonts. Turn it off to use the heading and body Font controls.
Background, text and accentThe main surface, foreground text and control accent. Internal optical shading remains part of the component's material treatment.
Example note and guide linkThe footer note and destination for the brand and quick-guide links. Replace the example URL before publishing.

Portrait images near 4:5 are a useful starting point. The open fold fills its surface, while the closed folds show a narrower crop. Image focus shifts the crop along both axes, so it remains useful when a phone changes which edge is cropped.

Every panel's default destination is https://example.com/. Set it to the real project page, case study or portfolio destination. If you keep the supplied example art, you can link to your own explanation of how you used it.

Try the deck

  1. Click a closed fold to expand it. The other folds remain visible as part of the same joined surface.
  2. With a fold button focused, use Left / Right or Up / Down to select another. Home selects the first and End the last.
  3. Use the Image focus slider. Its position is remembered separately for each fold during the current page session.
  4. Select Read the story to turn over the active fold. Its reverse has an explanation, materials, approach and a real link. On a small screen, scroll inside the reverse if the text needs more room.
  5. Select Return to image, or choose another fold to return to the picture side.
  6. Pause motion removes the animated transitions. Reset the view selects the first fold, returns to the image side, restores the initial focus values and resumes the configured motion.

The deck changes to a vertical concertina on a phone. It supports touch and keyboard input. The operating system's reduced-motion preference removes the transitions; the selected fold and reverse information still work.

Use the HTML example

  1. Extract the ZIP and keep its files and assets/ folder together.
  2. Open index.html. The images and interaction code work locally; system fonts are used while offline.
  3. Edit deck-config.js to replace the brand, heading, intro, focus value and panel content. Keep three panel objects in this HTML edition.
  4. Put your image files in assets/ and update their paths in the config. Edit deck.css for a different layout or material treatment.
  5. For a live HTML page, upload index.html, deck.css, deck.js, deck-config.js and assets/ to your own host. Check the published images and links.

For use inside an existing HTML page, copy the section[data-aperture] element, include deck.css, and load the config followed by deck.js. This HTML edition expects one deck per page. The Framer component uses unique instance IDs and can be inserted more than once.

What's included

Examples and license

The glass fern, contour island and glass fins are original AI-assisted fictional studies created for this kit. The image pixels do not become editable 3D models; the folding, focus and reverse-side interaction are real component behaviour.

You may use this free kit and its examples for multiple completed personal or commercial websites, including client work. Credit is optional. Keep the reusable source kit out of resale packs, template libraries and competing downloads. See the included license.

Help

For access issues or a reproducible defect, contact Wuren Studio using the support details supplied with your download. Include your browser, the panel and the steps that caused the problem. Everyday editing is covered here; custom design and individual training are not part of this free kit.