WUREN STUDIO / FREE FRAMER COMPONENT

Make a little room
for your work.

Bento Starter Free gives a small portfolio a proper opening: condensed headlines, a sculptural paper image and projects arranged at different scales. Each project opens to reveal its story. The note has a second side. Your work can finally leave the folder called final-final.

1. Give it a place on your canvas

Copy the entire component link below:

1. Open your own Framer project. Select the page’s canvas or the content stack where the grid belongs.
2. Paste with Ctrl+V on Windows or ⌘V on Mac. Paste into the Framer canvas.
3. Select the inserted Bento Starter component to open its controls in the property panel. Give it the available width and let its height fit the content.

2. Put your name on it

Edit Brand, Title and Introduction to introduce your work. Keep the first headline short enough to read comfortably beside the sculpture. Pocket Index is a fictional demonstration portfolio; give it your own name before publishing.

Context sets the small header line. Project note and Footer note describe the demonstration work. Replace them when adding your own projects, or leave them empty to hide them.

Open Projects to edit up to three entries. Each has Title, Kind, Description and Details. Use Image to choose your own artwork. If you leave an image empty, its supplied example appears: the paper sculpture PNG for the first project, followed by two original SVG illustrations.

Click a project in Preview to open its detail text, then click again to close it. Opening another project closes the previous one. These details appear within the grid. Edit Note heading, Note front and Note back to give the note tile both sides of your personality.

3. Choose the finishing touches

Set Contact title, Contact label and Contact URL. A mailto: link works for email, or you can point the button to your own contact page. If you leave Contact URL empty, the component hides the contact action. Contact note sets the text beside it and remains visible with or without a link. Leave that note empty to hide it.

Paper, Ink, Cobalt, Lime, Coral and Muted control the colours. Studio fonts uses Barlow Condensed for the display type and DM Sans for the body text. Turn it off to choose your own typography with Heading font and Body font. Font controls apply only when Studio fonts is off.

Subtle motion controls the optional transitions. The optional entrance runs once. On a pointer device, project images move slightly on hover. The component also follows a visitor’s reduced-motion preference. Its project details and note remain available when motion is reduced. The paper sculpture is a static PNG used in a layered layout; this download does not contain a 3D model.

Give the phone version a turn

Preview the page at phone width after changing the content. Check the longest title, the expanded project text and the part of each image that matters. A little editing usually beats a smaller font.

Use Tab to reach the project and note buttons. Enter or Space activates them. Open your contact action once to confirm it goes where you intended.

Use the source when you need it

The download contains six files: components/BentoStarter.tsx, assets/paper-sculpture-v2.png, assets/good-loop.svg, assets/paper-trail.svg, this guide and the free-use license. The sculpture is a new AI-generated fictional image. Both SVG illustrations were drawn for this product. The normal installation path is the component link above.

If you prefer to add the source, create a new code file in your Framer project, replace its contents with BentoStarter.tsx and save. Insert Bento Starter from your project’s components. Keep the source intact for the first insert; make your changes through the controls first. The default sculpture loads from a Framer asset URL. Its matching PNG is included so you can upload your own copy and set it through the first project’s Image control. The two SVG defaults are embedded in the source.

Section ID gives the component a page anchor. If you insert more than one copy on a page, give each copy a different ID.

Publish from your own Framer account when the page is ready. Hosting and domain options follow the plan you choose with Framer.

If something needs a nudge

• The component link opened in your browser: copy the full link and paste it into the Framer canvas.
• The controls are missing: select Bento Starter itself, rather than the frame around it.
• Your font change did not appear: turn off Studio fonts, then choose your font.
• The contact button is missing: give its destination control a valid link.

For a broken download, access issue or reproducible defect, use the existing Wuren Studio discussion. Include the page URL and the steps that caused the problem. Setup and routine editing follow this guide.

When your work needs more room

Sidequest Bento adds separate portfolio, project, process and closing components for building a longer story. Creator Shop is a complete store template for presenting digital products.

You can use Bento Starter Free in multiple completed personal, commercial and client websites. Credit is optional. The short free-use license explains source sharing and resale.