THANK YOU FOR YOUR PURCHASE OF CINEFOLIO!

YOUR CINEFOLIO REMIX LINK HAS BEEN SENT TO YOUR INBOXCHECK IT OUT. HERE IS YOUR CINEFOLIO COMPANION TO GET YOU STARTED, WITH THE FULL DOCUMENTATION IF NEEDED. START WITH BRAND FOUNDATION YOUSHOULD BE SET FROM THERE. ENJOY YOUR ELITE TEMPLATE.

CINEFOLIO COMPANION

YOUR TEMPLATE DOCUMENTATION & HOW TO USE.

HERE IS WHAT'S INCLUDED WITH YOUR TEMPLATE

BRAND FOUNDATION & CMS

YOUR MAIN ENTRY POINT / ENGINE FOR EVERYTHING FOR YOUR TEMPLATE. YOUR BRANDING, TYPOGRAPHY, AND COLORS. CMS HOME FOR YOUR PROJECTS, AWARDS, FAQs AND MORE. ALL IN THE CANVAS. ALL IN ONE PANEL. APPLIES ON EVERY PAGE. NO NEED TO KEEP SWITCH ING TABS.

INTUITIVE BROWSING EXPERIENCE

ENABLING YOUR AUDIENCE TO HAVE AN INTUITIVE AND SEAMLESS EXPERIENCE THROUGHOUT YOUR SITE. INTUITIVELY DISPLAY YOUR SITE'S PAGES AND CHAPTERS/SECTIONS OF YOUR PAGES. YOUR LOCAL TIME, AVAILABILITY, YOUR BRAND LOGO OR WORDAMARK. ALL IN ONE SEAMLESS MORPHING NAVIGATION MENU.

8 ELITE PAGES

LANDING PAGE, ABOUT, WORKS, PROJECT, PROCESS, FAQ, CONTACT and a 404 page

MODES & PRESETS

DARK OR LIGHT MODE. IMMERSIVE CINEMATIC OR MINIMAL AIRY, LEFT, CENTER OR RIGHT PLACEMENTS, GRIDS, BENTO OR MANSORY LAYOUTS, ALL PREDEFINED, FOR ALL YOUR PAGES & SECTIONS. APPLIED IN ONE CLICK.

20+ UNIQUE / ELITE COMPONENTS

SHOWCASE YOUR CRAFT IN A UNIQUE STYLE. ALL CUSTOMIZABLE, FROM TYPOGRAPHY TO LAYOUTS AND STYLES.

SMOOTH MOTION & ELITE TIER EFFECTS

CINEMATIC BLUR ANIMATIONS,MORPHING ELEMENTS, WEBGL EFFECTS, FILM GRAIN, HAZE PARALAX, SMOOTH PAGE TRANSITIONS AND MORE. ALL CUSTOMIZABLE.

FULL CUSTOMIZABILITY

EVERY SPECIFIC ELEMENT IN ALL PAGES & SECTIONS CAN BE FULLY CUSTOMIZED, TYPOGRAPHY, COLORS & BLENDING, POSITIONS, CONTENT,

FULL ASSETS SUPPORT

From footage/videos and images to logos and icons. All are fully supported. As files or urls. Each have unique customization abilities as positionning & fit for media, or monochrome & blending for logos and icons. All can be added anywhere, on components, on bentos, or as section backgrounds.

OPTIMIZED RESPONSIVENESS & PERFORMANCE

EXTENSITVE & POWERFUL PERFORMANCE OPTIMIZATION & SEGMENTATION BASED ON DEVICE. ENSURING A SMOOTH / RESPONSIVE EXPERIENCE EVRYWHERE. ALL WHILE DISPLAYING FULL ELITE QUALITY ON CAPABLE DEVICES.

AI PRODUCTIVITY READY

SINCE ITS FULLY CODE MADE, IT CAN BE FULLY CUSTOMIZED TO FIT YOUR OWN STYLES & PROCESSES / SYSTEMS. ADD YOUR OWN FEATURES, LOGIC OR, INTEGRATIONS. USING THE NATIVE FRAMER WORKSHOP PLUGIN, YOUR CLAUDE CODE OR CURSOR, USING THE FRAMER MCP FROM UNFRAMER.

CMS

ADD & EDIT ALL YOUR CMS CONTENT IN ONE PANEL. INSTANT VISUALIZATION.

BRAND & IDENTITY

SET YOUR STUDIO IDENTITY EVERYWHERE

CHANGE THE AVAILABILITY STATUS

POINT THE CLOCK AT YOUR CITY

MAIN ENTRY POINT / ENGINE FOR EVERYTHING FOR YOUR TEMPLATE. YOUR BRANDING, TYPOGRAPHY, AND COLORS. CMS HOME FOR YOUR PROJECTS, AWARDS, FAQs AND MORE. ALL IN THE CANVAS. ALL IN ONE PANEL. APPLIES ON EVERY PAGE. NO NEED TO KEEP SWITCH ING TABS.

BRAND FOUNDATION YOUR FIRST 10 MIN

THE OPERATING MODEL

Three ideas explain the whole template. Learn these and every control below is obvious.

1. Site vs This One Only

Content-bearing sections (Selected Work, the Work archive, the Project page, Footer, Hero status, the Nav identity) each have a Source control with two options: Site inherits from Brand Foundation; This One Only keeps the value set on that instance. The template ships every content section on Site, so one registry drives the site by default. Flip a single instance to This One Only when you want it to diverge — that's the choice, made per instance, never forced.

2. The standard panel

Every section exposes the same option families, so learning one section teaches all of them: Mode (type register, theme, layout, scroll, scale, rounding), Type (per text element), Media Layout (framing), Offset (nudge a key element), Ghost (the giant backdrop word), and Film Grain / Motion / Section ID.

3. The nav reads the page

The Chapters Nav builds its chapter list from the sections present on the page — each section's Section ID is the anchor. Add a section, it appears in the menu. Build a new page from sections, the menu understands it. No nav wiring.

FULL HOW TO USE

01 — 01

BRAND & IDENTITY

01 — 04

01Set your studio identity everywhere

Brand Foundation Page→ Click Brand Foundation Home → Brand: wordmark, city, time zone, availability, typography, email. Any Hero, Footer or Nav on Site source shows it. One edit, every page. Make sure tochoose All Site and apply everywhere options.

02Make one section keep its own identity

03Change the availability status

04Point the clock at your city

FONTS & TYPE

01 — 06

01Load your brand fonts

Assets → Fonts and upload your WOFF2, or drop files into Brand Foundation → Display / Body / Nav File. Then type the exact family names into Display / Body / Nav Family. Everything re-renders on the new faces.

02Resize all type at once

03Set global tracking

04Art-direct one heading

05Split a title's color between two tones

06IF THE CINEFOLIO PICKED FONTS ARE NOT DISPLAYED

PROJECTS & CASE STUDIES

01 — 07

01Add your projects

Brand Foundation → Site Projects → +. Give it a slug and a title at minimum; link to it anywhere as /project?p=your-slug. The card and the case-study page build themselves from the entry.

02Edit a project everywhere at once

03Write the case study

04Put your footages/images in a case study

05Frame a project cover

06Show hover previews on collapsed projects

07Add a different project list for a section specifically

MEDIA & FRAMING

01 — 02

01Reframe any image or video

Select the section → Media Layout → enable → Fit / Anchor (nine-point) / Zoom / Offset / Aspect / Padding. Works on every media slot in the template.

02Play a video anywhere an image goes

MODES, THEMES & LOOKS

01 — 05

01Switch the whole site to Minimal

on the published site, open the menu → MODE → MINIMAL. Minimal pairs with the light theme automatically. Immersive returns the dark stage.

02Flip the whole site's theme

03Make one section light while the site is dark or the opposite

04Force a section into Minimal on its own

05Change a section's style

THE CHAPTERS NAV

01 — 04

01Let the menu find your chapters

nothing to wire. Give each section a Section ID (Section → Film Grain / Motion / Section ID); the nav lists them and highlights the one on screen.

02Add a page to the list of links in it

03Set where brand appears

04Tune the opening style

SECTIONS & LAYOUT

01 — 06

01Reorder sections

drag on the canvas within the page's Desktop stack. The nav re-reads the order.

02Add a new section

03Nudge a title without breaking the composition

04Turn the giant backdrop word on or off

05Add a whole new page the site understands

06Change the Process presentation

MOTION & ACCESSIBILITY

01 — 02

01Change the motion style of a section

Section → Motion → Standard. Bouncy is the style of the island morph animation. though you can use it everywhere.

02Choose reduced motion when it matters

MOBILE & PERFORMANCE

01 — 02

01Trust the phone build

publish and open on a phone. Videos preview on scroll under a concurrency cap; blur and grain are dialed back; the governor steps quality to hold the frame rate; the atmosphere runs at a lower refresh to stay cool. This is a deliberate low-end posture, not a fallback.

02Keep a page cool with many videos

PUBLISHING

01 — 02

01Ship it

press Publish on the top right of the page. Check the live clock, the menu on a real phone, and one case-study link.

02Point a project card at its page

TROUBLESHOOTING

01 — 06

01My project edits don't show on the Work page / a project page.

That section's Source is on This One Only. Set Content Source / Projects Source back to Site on the instance. (Home Selected Work ships on Site; the Work and Project pages ship on Site for fresh remixes — if an older instance reads This One Only, flip it once in the panel with that page open.)

02A project link opens the wrong / a demo case study

03My font names don't take

04A section didn't flip theme with the site

05The menu doesn't list a section

06Video looks blank on the canvas

have a query?

reach out to us here,

X - QUICK RESPONCE / CHAT

@tafgarden

QUERIES - BUGS - FEATURE REQUESTS

omar.tafg@protonmail.com

URGENT QUERIES

omar.elalaouifathi@outlook.com