OPTIC / SQUARESPACE INSTALLATION KIT

A proper page.
On your own site.

Keep your Squarespace header and footer. Bring Optic’s dark, warm-orange design, editable feature sections and interactive viewfinder to /optic.

Native editable blocksNo iframeNo added libraries

Built for Squarespace 7.1.

Interactive Code blocks require Core, Plus, Advanced, or legacy Business/Commerce plans. Without JavaScript, the widget remains a readable still illustration. You’ll install and publish these materials in Squarespace; this handoff does not access your account.

THE EXACT PORTABLE WIDGET

Try the frame before you paste.

This runs the same library-free code supplied for Squarespace. The rest of your page stays in native editable blocks.

Alpine peaks and a lake, used as the sample landscape in Optic — Interactive illustration, not a live camera or calculated sun forecast. Example lens changes are illustrative, not calibrated field-of-view measurements. Toggle framelines; deselect all for a clear recording gate.

01 / YOUR INSTALLATION PATH

Native page. One small widget.

Squarespace has no one-click import for the existing React site. This kit gives you everything to assemble a proper editable page on your domain.

01
Create /optic, not a second website.
In Pages → Not Linked, add a blank Optic page and set its URL slug to optic. Keep your existing header and footer. Add blank sections for the eight-part layout below. Unlinked does not mean private; use Squarespace’s page privacy controls while preparing it if needed.
02
Upload your two original images.
Download the icon and landscape below. Upload them through native Image blocks in Squarespace. On the saved page, use Copy image address to get public HTTPS URLs. Those URLs go in the snippet builder—not the draft Superapp URLs.
03
Find this page’s styling ID.
Open the saved /optic page outside the editor. View Page Source or Inspect, find the opening body tag and copy its id value starting collection-. Paste the full ID below. This scopes styling to this page’s main content, without restyling your header or footer.
04
Paste the widget once.
Prepare your snippets below. Add one full-width Code block in the preview section. Select HTML, turn Display Source OFF, and paste the complete widget snippet. Allow enough height for its scene, controls and caption in both desktop and mobile layouts.
05
Use native blocks for everything else.
Follow the section copy below with Text, Image, Button and Accordion blocks. Append the generated page-scoped CSS in Custom CSS without replacing your existing rules. Use native section controls for columns and spacing; do not paste the standalone website’s global stylesheet.
06
Make the download actions honest.
In the closing section’s Edit Section panel, set Anchor Link to optic-availability. Link both Download on the App Store buttons to #optic-availability and keep the availability notice visible. Add the confirmed App Store link to both buttons after approval.
07
Check, then add it to your menu.
Save and test the page outside the editor, including on a phone. Squarespace may suppress scripts while editing. Add the supplied SEO title and description, then move Optic into your main navigation and publish in Squarespace. Publishing the Superapp draft does not install or publish this page there.

Saved-page checklist ↓

Read the full guide here / copy manually

# Optic for Squarespace — installation guide

This kit makes a real `/optic` page on your own Squarespace site. Its text, images, buttons and FAQs use native editable blocks. Only the viewfinder illustration uses custom code. There is no iframe, no React installation and no second site header or footer.

## Before you start

- These instructions target Squarespace **7.1** and its current page editor. Exact menu labels can vary.
- JavaScript in Code blocks requires **Core, Plus, Advanced**, or legacy **Business / Commerce Basic / Commerce Advanced**. On a plan without this feature, the supplied widget remains a clearly labeled still illustration, without interactive buttons.
- This is a handoff, not an automatic account installation. Create and publish the page in your Squarespace account. No Squarespace credentials are requested here.
- Keep your existing navigation, header and footer. This kit's colors and typography apply only to `/optic` content and the illustration.
- The App Store URL will be added after approval. Support is the in-app Field Guide and the page's FAQs; do not add an email button or contact form.

## 1. Create the page

1. Open **Pages** in Squarespace.
2. Under **Not Linked**, add a blank page named **Optic**. Starting unlinked lets you assemble it before visitors see it in the menu. Not Linked does not make a page private: use Squarespace's page password or disable the page while preparing it if needed.
3. In page settings set the URL slug to **optic**, so the address is `yourdomain.com/optic`.
4. Leave your existing site header and footer enabled. Do not use a cover page or embed the standalone Optic website.
5. Add blank sections in the eight-section order shown in the supplied section copy. Use native **Text**, **Image**, **Button** and **Accordion** blocks, apart from the viewfinder Code block.
6. Set the sections to a dark background in the editor. Use Medium or Large content width, roughly 64–96 px breathing room vertically on desktop and 32–48 px on mobile. These are starting points, not settings for your whole site.

## 2. Upload the original images

1. Download **optic-icon.png** and **scouting-landscape.jpg** from the handoff page. These are the exact original app assets, not generated replacements.
2. Add an **Image block** in the hero, upload the icon, and display it at roughly 64–90 px square. Reuse the same upload in the closing section.
3. Add another **Image block** in the scouting section and upload the landscape. Keep its natural crop or use a wide crop; caption it as a sample illustration, not an actual saved capture.
4. Save the page. In a separate browser tab, open the saved page, right-click each displayed image and choose **Copy image address** (or **Open image in new tab**, then copy the address). Use public HTTPS image URLs hosted by Squarespace, usually on `images.squarespace-cdn.com` or `static1.squarespace.com`.
5. Paste those two URLs into the handoff page's snippet builder. Do not paste a Squarespace editor URL, a shared folder URL or a draft Superapp URL.

Suggested alt text:

- Icon: **Optic app icon**.
- Landscape: **Alpine peaks and a lake, used as the sample landscape in Optic**.

Keep a small **Landscape photo: Unsplash** attribution, linked to `https://unsplash.com`. Do not invent a photographer name or imply these illustrations are physical-iPhone screenshots.

## 3. Get this page's styling ID

The styling must not affect your other Squarespace pages or your existing header/footer.

1. Open your saved `/optic` page outside the editor.
2. Right-click the page, choose **View Page Source**, and find the opening `<body` tag. You can also use **Inspect** to find it.
3. Copy its `id` value, starting with **collection-**. For example, an ID looks like `collection-...`; copy the actual value from your page, not the dots.
4. Paste this value into the handoff builder's **Optic page ID** field. A leading `#` is accepted and removed.

The generated native-block CSS is scoped to this ID and the page's `#page` content area. It does not target the site's header or footer. If your page does not have that structure, do not replace the ID with `body`, a wildcard or a site-wide selector: inspect your template before adapting it. A Squarespace 7.0 template needs separate adaptation.

## 4. Insert the interactive preview

1. In the handoff page, enter the two uploaded image URLs and the page ID, then click **Prepare my snippets**.
2. Copy **Interactive preview — complete Code block**. It includes the HTML, its isolated CSS and JavaScript together; no external library or script URL is needed.
3. In the preview section of `/optic`, choose **Add Block → Code**.
4. Select **HTML** in the Code block editor. Turn **Display Source OFF**.
5. Paste the entire snippet into that block. Do not paste it into an Embed block, a Text block or your site header/footer code settings.
6. Stretch the block across the section's content width. Allow enough block and section height for the scene, controls and caption. Adjust this in both desktop and mobile layout views; do not place other blocks on top of it.
7. Save, then open the page outside the editor in a new tab or private window. Squarespace can suppress scripts while editing, so a static view in the editor is not by itself a failure.

The controls should offer **24 / 35 / 50 / 85 mm**, **2.39:1 / 16:9 / 1:1**, and **Sun path**. Deselect every guide: the white recording gate should stay clear, with only its dark surround. Sun path and lens selection remain independent of guide selection.

The picture and sun are illustrations, not a camera feed or a calculated forecast. No visitor choices are saved. The widget asks for no camera, microphone or location permissions.

## 5. Apply the native-block styling

1. Copy **Page-scoped Squarespace CSS** from the prepared snippets.
2. Open Squarespace's **Custom CSS** panel. It may be reached from **Website → Website Tools → Custom CSS**, or **Design → Custom CSS**, depending on your account interface.
3. Append the supplied CSS to your existing CSS. Do not overwrite or delete the site's existing rules.
4. Save. Only the new page's main content should become dark, warm-orange and system-font styled. Other pages and your header/footer should remain unchanged.
5. Italicize the hero phrase **Before you shoot.** in its native Text block to give it the supplied amber treatment; the page CSS removes the italic slant.
6. Use the Squarespace editor for columns, section height, alignment and spacing. This kit does not override your site's grid or mobile ordering.

The preview's CSS is already in its Code block. Do not also paste all of the standalone website's global stylesheet into Squarespace.

## 6. Add the copy and honest download actions

1. Follow **Section-by-section copy** in the handoff page. Copy each block's text into the corresponding native Squarespace block, then apply the indicated H1/H2/H3, paragraph or accordion style.
2. Use exactly **one H1** in the page content: `See the shot. Before you shoot.`
3. In the closing section, choose **Edit Section → Anchor Link**, enter **optic-availability**, then save. Built-in section anchors are supported in Squarespace 7.1.
4. Link both native **Download on the App Store** buttons to **#optic-availability**. They point to the visible availability notice until the listing exists; they do not pretend a download is available.
5. Keep **The App Store link will be added here after approval. There is no download destination to open yet.** visible in that closing section, and keep the shorter notice in the hero.
6. Add FAQ items with native **Accordion** titles and descriptions. Keep **Optic badge → About → Open Field Guide** directions visible below them.
7. Include the provided privacy note and a small **Built with Superapp** link to `https://superapp.dev` above your existing footer.
8. Do not add links to `/privacy` or `/support` on your Squarespace domain until those pages have actually been created. This build supplies the concise privacy/support information on `/optic`, not separate Squarespace policy pages.

## 7. SEO, navigation and publishing

In Squarespace's page SEO settings use:

**SEO title**

Optic — Director’s Viewfinder & Sun Planning for iPhone

**SEO description**

See the shot before you shoot. Optic combines camera-and-lens framing, sun planning, annotated scouting photos and video in a focused viewfinder for iPhone.

- Use your uploaded Optic icon or a suitable approved landscape as the page's social sharing image. Do not claim the landscape is an app screenshot.
- After checking the page, move **Optic** from Not Linked into your main navigation, wherever you want it.
- Save and publish using Squarespace's own controls. Publishing the separate Superapp draft does not publish or update your Squarespace page.
- The `/squarespace` handoff page is unlisted and marked `noindex`. That is not a password or access-control system; do not place private information there.

## Quick verification on your saved Squarespace page

- Desktop and phone: your existing header/footer stay visible, with no duplicates.
- No horizontal scrolling. The preview's caption and controls are not clipped; increase its block/section height if necessary.
- Each example lens changes magnification and the visible focal label; exactly one lens is selected.
- Any combination of guides is allowed. Turning all of them off leaves the white gate clear. A 16:9 guide fills that gate without adding an inner matte.
- Toggling Sun path shows/hides only the illustrated path and its plotting-time label.
- With a keyboard: Tab reaches the controls, Enter/Space activates them, focus is visible and selected states are announced.
- Reduced-motion settings disable the image transition. With scripts unavailable, the static picture, its default guide and the disclosure remain readable; interactive controls are not shown as dead buttons.
- Both download buttons lead to the visible availability section, not to an invented App Store URL.
- FAQs, attribution and the GPS/privacy note are present. No email button or contact form is present.

## Editing later

- **App Store approval:** replace the destination of both native Button blocks with the confirmed `https://apps.apple.com/...` listing, and update/remove the availability notes. A change on the standalone Optic site does not update Squarespace automatically.
- **Copy:** edit the native Squarespace blocks directly. No development tools are needed.
- **Example presets:** in the supplied `preview.html`, edit button labels and `data-ovp-focal`, or ratio labels and `data-ovp-ratio`, and update the root's `data-default-focal` / `data-default-guides`. The widget's magnification is illustrative; it is not a cinema-lens calibration. Keep the caption honest.
- **Appearance:** edit `preview.css` for the widget only, and the page-scoped `page.css` for native blocks. To reassemble a single Code block after manual edits, put the preview CSS inside `<style>` tags, follow it with the configured HTML fragment, then put `preview.js` inside `<script>` tags. Do not include the page-scoped CSS in the widget; append it separately in Custom CSS. Re-paste the combined block after changing its sources.
- **Remove:** delete the preview Code block and remove only the supplied page-ID CSS rules. Your site's other styling, header/footer and domain remain intact.

No backend, analytics, permissions, accounts, forms or visitor-data persistence are added by this kit. It does not disable any analytics or services already present on your Squarespace site.

## Official Squarespace references

- Code blocks and plan support: https://support.squarespace.com/hc/en-us/articles/206543167-Code-blocks
- Custom CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Add-custom-CSS-to-your-site
- Section anchors: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

02 / THE ORIGINAL ARTWORK

Download. Upload. Keep it yours.

These are the exact assets used in Optic. Upload them to Squarespace so your installed page does not depend on this draft website.

Optic icon

Original 1024 × 1024 PNG. Use in the hero and closing section.

Download icon

Sample landscape

Original 1600 × 1067 JPEG. Keep the illustration disclosure and Unsplash attribution.

Download landscape

03 / MAKE IT YOURS

Ready-to-paste. Not guess-and-replace.

Upload the two images to Squarespace, then add their URLs and your page ID. The builder safely fills the snippets for you. These fields stay in this browser tab; they aren’t saved or submitted.

Add all three details to prepare the copy-and-paste snippets.

04 / NATIVE, EDITABLE BLOCKS

Your page. Section by section.

Build these sections with Squarespace’s own blocks. Copy the text, apply the indicated heading styles, and use the layout notes. There’s no second website header or footer to add.

01Hero

Blank section. Place the icon above the copy, then add the heading, supporting text and Button block. Use a generous single column or place copy on the left of the following preview on desktop. On mobile, put the copy first. Keep your existing site header.

Section anchor: optic-intro

Image

optic-icon.png

Upload the supplied original icon. Use an approximately 64–90 px square display size; alt text: Optic app icon.

Download original image

Text — eyebrow

THE DIRECTOR’S VIEWFINDER FOR IPHONE

Text — H1

See the shot. Before you shoot.

The page’s only H1. Italicize “Before you shoot.” in the text editor; the supplied CSS displays it in amber without italics.

Text — body

Your camera. Your lens. Your light. A clearer way to find the frame, before the first take.

Button

Download on the App Store

Link to #optic-availability for now, in the same tab. Add the confirmed App Store URL to this button after approval.

Text — requirements

Made for iPhone · iOS 17+ · No account required The App Store link will be added after approval.

02Interactive viewfinder

Use a separate blank section and one full-width Code block. Paste the complete preview snippet generated below: HTML selected, Display Source off. Keep enough section height for the scene, controls and caption on desktop AND mobile. Do not add a second header or footer.

Section anchor: optic-preview

Text — eyebrow

EXPLORE THE FRAME

Text — H2

Same scene. Different story.

Code

Use the generated interactive preview snippet.

The snippet includes only the illustration. The rest of the page stays in native editable Squarespace blocks.

Get the prepared widget snippet ↑

03Framing

Add a blank section with a heading and intro. Below it, arrange three native Text blocks as columns on desktop, stacked on mobile. A separate small Text block holds the catalogue and accuracy notes.

Section anchor: optic-framing

Text — eyebrow

01 / COMPOSE

Text — H2

Your kit. Without the kit.

Text — intro

Bring the camera you’re planning to use, not just the one in your pocket. Choose your sensor format and lens, then see how the scene fits.

Text — catalogue

BUILT-IN PLANNING PROFILES ARRI · RED · Sony · Blackmagic 105 camera profiles · 263 lens profiles

Text — H3 + body

One view. Every delivery. Compare multiple framelines inside a fixed recording gate. Add custom ratios, or turn every guide off. Your image scale stays put.

Text — H3 + body

A lens change. A thumb away. Swipe between primes. Slide and hold for continuous zoom. Smooth transitions keep the image and its guides together.

Text — H3 + body

Just you and the frame. Tap to clear the controls. Keep the framelines, focal length and active sun path. Your kit is remembered when you return.

Text — small note

Nominal field-of-view planning, not a simulation of lens character or depth of field. Catalogue names identify planning profiles, not endorsements. Always verify your physical kit.

04Sun planning

Use a spacious text-led section. The interactive preview above supplies the sun-path visual; do not imply it is a real forecast. Add the three capability lines as a native bulleted list and retain the accuracy note.

Section anchor: optic-sun-planning

Text — eyebrow

02 / PLAN THE LIGHT

Text — H2

Meet the light. Before call time.

Text — body

See a sun path over your camera view. Pick the shooting date, scrub the time and find the light that makes the frame.

Text — bulleted list

Past and future shooting dates Local-time sunrise and sunset Horizon, sun position and off-screen cues

Text — small note

Approximate alignment needs location and reliable compass readings. The path doesn’t account for terrain, buildings or clouds.

05Scouting captures and Weather

Use a two-column section: the original landscape in an Image block on the left, native Text blocks on the right. Caption the landscape as an illustration, not an actual saved JPEG. Stack the image before the text on mobile.

Section anchor: optic-captures

Text — eyebrow

03 / KEEP THE SCOUT

Text — H2

Save the frame. Keep the context.

Text — intro

The best recce notes are the ones you can see. Take your framing decisions back to the crew, without the on-screen controls.

Image

scouting-landscape.jpg

Upload the supplied original landscape. Alt text: Alpine peaks and a lake, used as the sample landscape in Optic.

Download original image

Text — image caption

Sample landscape from Optic. Scouting illustration, not a captured frame. Landscape photo: Unsplash.

Link “Unsplash” to https://unsplash.com. Do not imply this is a screenshot or an actual sun forecast.

Text — H3 + body

A photo with the details. Save JPEGs with your lens, format, ratios and capture time. Available GPS and heading travel in a visible strip and image metadata. An aligned, active sun path can appear in saved photos too.

Text — H3 + body

Hold for the moving picture. Hold the shutter for two seconds to record a framed clip with microphone audio on iPhone. Tap again to finish. Videos stay free of widgets and sun overlays.

Text — H3 + body

A shutter you can feel. Use either volume button in live view on iOS 17.2+, or the on-screen shutter. Everything saves straight to Photos with add-only permission.

Text — H3 + body

Weather, for right now. Check temperature, cloud cover, wind and six-hour rain chances in the optional Apple Weather panel. Internet required; forecasts are for now, not your planned date.

06Workflow

Three native Text blocks across on desktop and stacked on mobile. Use the step number as a small first line, then H3 and paragraph styles. No custom-code cards are needed.

Section anchor: optic-workflow

Text — eyebrow

FROM FIRST LOOK TO FIELD NOTE

Text — step 1

01 Choose your kit. Set the camera, format and lens. Keep your favorite ratios ready.

Text — step 2

02 Find your frame. Try focal lengths, compare crops and see where the sun will be.

Text — step 3

03 Take it with you. Save a photo or clip to Photos. Your settings stay on your iPhone.

07FAQs and Field Guide

Add an H2 Text block and a native Accordion block. For each FAQ, put the first line in the accordion title and the remaining text in its description. Add the Field Guide directions as a separate, always-visible Text block below.

Section anchor: optic-help

Text — eyebrow

A FEW FIELD NOTES

Text — H2

Good to know.

Accordion item

Who is Optic for? Directors, cinematographers and anyone scouting a shot. Optic combines camera-and-lens framing, sun planning and annotated captures in a focused landscape viewfinder for iPhone.

Accordion item

Can I use my own formats and lenses? Yes. Choose from the built-in offline catalogue of 105 camera and 263 lens profiles, or create custom sensor formats, focal lengths and delivery ratios. Your kit and frameline choices are saved on this iPhone.

Accordion item

Does it work without an account or internet? No account is needed. Framing, the catalogue and solar calculations run on-device. Sun alignment needs available location and compass readings; local forecasts need internet access to Apple Weather.

Accordion item

Does Optic reproduce the look of a cinema lens? No. It plans nominal field of view, including anamorphic squeeze. It does not simulate lens character, depth of field, distortion or breathing. When the chosen view is wider than the phone can cover, missing areas stay black and the app tells you.

Text — Field Guide

Help that goes with you. In Optic, tap the Optic identity badge to open About, then choose Open Field Guide beneath the version. Tap Done to return. The guide covers framing, sunlight and capture. Support is the Field Guide and these FAQs for now; no email contact or form is offered here.

08Closing and App Store availability

A centered blank section with the icon, closing heading and Button block. In Edit Section, set Anchor Link to optic-availability. Keep the availability text visible directly beneath the button so both download actions lead to an honest explanation.

Section anchor: optic-availability

Image

optic-icon.png

Reuse your uploaded icon at about 90 px square.

Download original image

Text — eyebrow

YOUR NEXT SHOT STARTS HERE

Text — H2

The frame is out there. Go find it.

Text — body

Bring Optic on your next scout. For directors. For cinematographers. For iPhone.

Button

Download on the App Store

Link to #optic-availability until a confirmed App Store URL is supplied. Keep the adjacent notice visible; do not suggest a download is available yet.

Text — availability notice

The App Store link will be added here after approval. There is no download destination to open yet.

Text — privacy note

No account is required. Your kit settings stay on this iPhone. Photos may include visible GPS coordinates and location metadata when available; review them before sharing. Optional Apple Weather uses location for local forecasts. This illustration adds no tracking or visitor-data storage; your existing Squarespace site’s own policies still apply.

Text — attribution

Landscape photo: Unsplash. Interface visuals are illustrations, not a live camera or calculated sun forecast. Built with Superapp.

Link “Unsplash” to https://unsplash.com and “Built with Superapp” to https://superapp.dev. Use a small Text block above your existing site footer; do not add another footer. No links to /privacy or /support are needed until you create those pages in Squarespace.

Squarespace page SEO

Set the page slug to /optic. Use one H1 in the page content. Add these values in the page’s SEO settings.

SEO title

Optic — Director’s Viewfinder & Sun Planning for iPhone

SEO description

See the shot before you shoot. Optic combines camera-and-lens framing, sun planning, annotated scouting photos and video in a focused viewfinder for iPhone.

05 / BEFORE YOU PUBLISH

Check it where it will live.

The supplied widget and handoff can be verified here; your actual Squarespace layout still needs checking in your account. Scripts may be suppressed inside the editor—test the saved page in a new tab or private window.

Existing Squarespace header and footer remain, with no duplicates or changes on other pages.
On desktop and phone, the widget has no horizontal scrolling and no clipped controls or caption.
24, 35, 50 and 85 mm change the illustrated magnification and label; exactly one lens stays selected.
Every guide can be toggled. Deselecting all leaves the white recording gate clear; 16:9 fills the gate without an inner shade.
Sun path toggles independently. It is clearly an illustration, not a calculated forecast.
Keyboard Tab reaches the controls; Enter/Space works, focus is visible and selected states are announced.
Reduced Motion stops the image transition. Without scripts the still illustration and explanation remain readable.
Both download actions lead to the visible App Store availability notice until the approved listing exists.
Native FAQs, Field Guide directions, visible-GPS privacy note, Unsplash attribution and Built with Superapp credit are present.

Your page, your publishing controls.

No Squarespace changes are made automatically. Exact spacing beneath your header is set in your editor. This setup page is unlisted and marked not to be indexed; it is not password-protected. The widget adds no tracking, storage or permissions, but does not remove services already on your Squarespace site.

Official Squarespace help: Code blocks · Custom CSS · Section anchors

A proper page.On your own site.

Try the frame before you paste.

Native page. One small widget.

Create /optic, not a second website.

Upload your two original images.

Find this page’s styling ID.

Paste the widget once.

Use native blocks for everything else.

Make the download actions honest.

Check, then add it to your menu.

Download. Upload. Keep it yours.

Optic icon

Sample landscape

Ready-to-paste. Not guess-and-replace.

Your page. Section by section.

Squarespace page SEO

Check it where it will live.

A proper page.
On your own site.