51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T70b,

TypeShift Section turns one media moment and a few words into a focused editorial sequence. Its split-screen keeps the visual and message together while oversized elastic type reshapes as visitors scroll. Use it for studio stories, craft processes, portfolio introductions, launches, and campaign statements.

Why it works

Media establishes atmosphere while elastic type gives short copy hierarchy and movement. A transition between two phrases creates a visual beat instead of a static headline beside an image.

What you can change

Edit the image or video, poster, two phrases, typeface, colors, fit, focus, spacing, panel heights, scroll travel, and header offset from Framer's property panel. The second phrase is optional, and Manual mode provides a still state.

How it fits your page

At 700px component width and above, media and type split the width evenly. Below 700px, media flows above the type panel while page scrolling drives the transition. Set Width to Fill and Height to Fit Content, keep the parent unclipped, and match Header offset to any fixed navigation.

Video and accessibility

An image can serve as the poster while video loads or cannot play. MP4 video is muted with no player controls. Reduced-motion settings show the poster and complete text without the pinned effect. Use licensed media and meaningful image alt text.

What to expect

This is one Framer Code Component with property controls, not a website template, native text-layer pack, stock-video library, or CMS slider. A lightweight default image completes the first insertion; replace it with your own image or MP4. Character support depends on the selected typeface.

Support: hello@periphi.com

53:T7a3,

TypeShift stretches and compresses word rows as visitors scroll. Create expressive brand manifestos, portfolio introductions, and landing-page sections with one elastic typography panel.

Customize in Framer

Two editable phrases, up to six non-empty rows each. The second phrase is optional.
Typeface, text and background colors, row gap, and inset.
Normal, clockwise, or counterclockwise orientation.
Independent panel height and scroll distance.
Manual playback for a still state without pinning or extra scroll space.

Setup and scroll space

Use a vertical Stack. Set component Width to Fill and Height to Fit Content. Keep parent height content-sized and Overflow: Visible; check ancestor overflow if pinning fails.

Total height = panel height + Scroll distance. Defaults: 600px + 1000px = 1600px. The extra space drives the animation.

Choose Viewport with height 100 for a viewport-filling panel, or Fixed for breakpoint-specific heights. Preview from the page top.

Reduced motion

In Scroll mode, a browser-reported reduced-motion preference shows all text without animation and fits height to the content. Extra scroll space and internal scrolling are removed. This is not iOS-only; a fixed-height parent can still retain its own space.

Not seeing the scroll animation?

On iOS, when Settings → Accessibility → Motion → Reduce Motion is turned on, TypeShift displays the full text without animation.

Before you buy

Requires Framer. One Code Component with property controls, not a website template or native editable glyph layers. Uses preset word-row layouts. Font character coverage depends on your typeface. Fixed-header offsets are not automatic. No third-party API keys or backend setup.

Support: hello@periphi.com

54:T4f9,

Turn a simple feature list into a guided visual story

Orbit Selector keeps your main message centered inside a graduated circular dial while visitors move through an animated item list and focused detail card. Let the page scroll guide the sequence, or let visitors explore directly with click, keyboard, and mobile swipe controls.

What's included

Responsive desktop, tablet, and mobile layouts
Scroll progression, direct selection, and optional wheel snapping
Editable items, images, supporting details, and CTA
Flexible typography, colors, spacing, corners, and motion
Outline, Solid, and Text CTA styles
Keyboard navigation, accessibility labels, and reduced-motion support
No CMS or separate code override required

Make it yours

Add, remove, and reorder items from the property panel, then match the section to your brand without editing code.

Best for

Service highlights, product features, processes, portfolios, and brand stories with 3–8 items.

Quick setup

Paste the Component URL onto your Framer Canvas, set Width to Fill and Height to Fit, and customize from the property panel.

55:T5f4,

Wheat & Yeast Basic is a warm, editorial Framer template for artisan bakeries, sourdough studios, neighborhood cafés, pastry studios, and independent food brands.

Wheat & Yeast Basic translates the natural rhythm of a real bakery—what you bake, when it comes out of the oven, how it's made, and the stories behind it—into one responsive, easy-to-edit website. Rich food imagery, expressive typography, and a restrained cream-and-cocoa palette create a crafted look without sacrificing clarity.

WHAT’S INCLUDED

• Four structured CMS collections: Products, Bake Schedule, Baker’s Notes, and Bakery Settings

• A filterable menu with CMS-powered product detail pages

• Daily bake schedules linked to product content

• Editorial Baker’s Notes featuring rich-text articles

• Responsive layouts for desktop, tablet, and mobile

• Reusable components, an editable hero video, custom interactions, and an English CMS user guide

Built for bakeries and food brands that primarily operate in person. Simply replace the demo content, update your global bakery settings, and publish directly from Framer.

Please note: Wheat & Yeast Basic intentionally focuses on brand presentation. It does not include online ordering, reservations, cart functionality, payment processing, real-time inventory management, or sold-out states.

56:T4d3,

Stats Section is a fully customizable Framer component that animates numbers when scrolled into view — perfect for showcasing statistics, metrics, and achievements on any landing page.

Key Features

Scroll-triggered animation with smooth easeOutExpo easing
Native Framer font picker for number and label typography
Per-item value, prefix, suffix, and decimal configuration
1,000 separator toggle (e.g. 10,000+ vs 10000+)
Label Case control — None / UPPERCASE / lowercase / Capitalize
Column Gap & Row Gap — independent spacing control
Responsive wrap — auto stacks on smaller widths (set width to Fill)
Per-side padding control (T / R / B / L) - Optional divider lines between items
Background color and border radius support

Usage

Add the component to your page
Set width to Fill
Edit Stats items — value, label, prefix, suffix
Done

Perfect For Landing pages · Portfolios · SaaS sites · Agency sites · E-commerce

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-49102070-49db-406c-8cbf-f0bb12ac282a-all:/unified/creator/49102070-49db-406c-8cbf-f0bb12ac282a/activity/":[{"data":[{"id":"01a10d1c-1c6a-76ec-9848-d81387d14aa2","type":"comment.liked","target":{"type":"comment","id":"01a1034a-091f-760c-b577-0ec3c2fa0205","preview":"hey would love to collab mail me at help@mail.portcode.in","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hey would love to collab mail me at help@mail.portcode.in"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a1034a-091f-760c-b577-0ec3c2fa0205"},"repost":null}},"context":{"type":"post","id":"01a10217-9f91-7144-ac5b-ce4f5f19459f","preview":"TypeShift Section in motion.\nOne image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition.\nUse it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer.\nWatch the scroll transition, then explore the component: https://framer.link/QzBUCJy","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift Section in motion."}]},{"type":"paragraph","content":[{"type":"text","text":"One image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Watch the scroll transition, then explore the component: "},{"type":"text","text":"https://framer.link/QzBUCJy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/QzBUCJy","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/ylNlAKL00Yyc1qJJ5xSJtv9BVWJohJPqE4YsdD02zTwZ8/thumbnail.webp?time=2.967","targetDeleted":false,"owned":true,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T17:28:28.517Z","latestAt":"2026-10-05T17:28:28.517Z"},{"id":"01a10d1c-168e-74ab-8e96-576cc37ba5cf","type":"comment.liked","target":{"type":"comment","id":"01a10221-3632-730b-bb2e-a842677f44fa","preview":"That's an awesome effect/animation! 🙌","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"That's an awesome effect/animation! "},{"type":"emoji","attrs":{"name":"raised_hands","emoji":"🙌"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a10221-3632-730b-bb2e-a842677f44fa"},"repost":null}},"context":{"type":"post","id":"01a10217-9f91-7144-ac5b-ce4f5f19459f","preview":"TypeShift Section in motion.\nOne image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition.\nUse it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer.\nWatch the scroll transition, then explore the component: https://framer.link/QzBUCJy","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift Section in motion."}]},{"type":"paragraph","content":[{"type":"text","text":"One image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Watch the scroll transition, then explore the component: "},{"type":"text","text":"https://framer.link/QzBUCJy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/QzBUCJy","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/ylNlAKL00Yyc1qJJ5xSJtv9BVWJohJPqE4YsdD02zTwZ8/thumbnail.webp?time=2.967","targetDeleted":false,"owned":true,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T17:28:27.017Z","latestAt":"2026-10-05T17:28:27.017Z"},{"id":"01a10d1c-0612-7738-a670-a7c65b372d18","type":"comment.reply","target":{"type":"post","id":"01a10217-9f91-7144-ac5b-ce4f5f19459f","preview":"TypeShift Section in motion.\nOne image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition.\nUse it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer.\nWatch the scroll transition, then explore the component: https://framer.link/QzBUCJy","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift Section in motion."}]},{"type":"paragraph","content":[{"type":"text","text":"One image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Watch the scroll transition, then explore the component: "},{"type":"text","text":"https://framer.link/QzBUCJy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/QzBUCJy","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/ylNlAKL00Yyc1qJJ5xSJtv9BVWJohJPqE4YsdD02zTwZ8/thumbnail.webp?time=2.967","targetDeleted":false,"owned":true,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a10d1c-05ef-762f-acd1-d885a7bec848","preview":"The word rows use scroll-linked SVG transforms inside a custom Framer Code Component. Thanks for the heads-up about Safari’s address bar!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The word rows use scroll-linked SVG transforms inside a custom Framer Code Component. Thanks for the heads-up about Safari’s address bar!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a10ae4-06f9-7477-8570-335346fb8064"},"repost":null}},"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T17:28:22.802Z","latestAt":"2026-10-05T17:28:22.802Z"},{"id":"01a10d1b-d1b2-7194-a380-051c3b48ad60","type":"comment.liked","target":{"type":"comment","id":"01a10ae4-06f9-7477-8570-335346fb8064","preview":"How are the word rows driven, scroll-linked transforms in code or Framer scroll effects per row? I'd check it on iOS Safari, the address bar resizing the viewport mid-scroll tends to make oversized type jump.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"How are the word rows driven, scroll-linked transforms in code or Framer scroll effects per row? I'd check it on iOS Safari, the address bar resizing the viewport mid-scroll tends to make oversized type jump."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a10ae4-06f9-7477-8570-335346fb8064"},"repost":null}},"context":{"type":"post","id":"01a10217-9f91-7144-ac5b-ce4f5f19459f","preview":"TypeShift Section in motion.\nOne image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition.\nUse it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer.\nWatch the scroll transition, then explore the component: https://framer.link/QzBUCJy","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift Section in motion."}]},{"type":"paragraph","content":[{"type":"text","text":"One image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Watch the scroll transition, then explore the component: "},{"type":"text","text":"https://framer.link/QzBUCJy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/QzBUCJy","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/ylNlAKL00Yyc1qJJ5xSJtv9BVWJohJPqE4YsdD02zTwZ8/thumbnail.webp?time=2.967","targetDeleted":false,"owned":true,"actions":{"postId":"01a10217-9f91-7144-ac5b-ce4f5f19459f","like":{"count":10,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-05T17:28:09.379Z","latestAt":"2026-10-05T17:28:09.379Z"},{"id":"01a1021c-3e4a-762c-95cc-c24f4b934d24","type":"creator.followed","target":{"type":"creator","id":"0b4ee473-43c0-409a-82ce-4f2db75bd544","preview":"Shourab Mali","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0b4ee473-43c0-409a-82ce-4f2db75bd544/1cvopbq5","slug":"shourab-mali","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T14:12:47.803Z","latestAt":"2026-10-03T14:12:47.803Z"},{"id":"01a1021c-3303-75bf-ac3d-acaf6c47bdfc","type":"creator.followed","target":{"type":"creator","id":"e7d1c8f1-e3f1-4d46-949b-7866d26de465","preview":"Dhiraj Ingle","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e7d1c8f1-e3f1-4d46-949b-7866d26de465/w98sm0ai","slug":"dhirajingle","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T14:12:44.916Z","latestAt":"2026-10-03T14:12:44.916Z"},{"id":"01a0f1e1-cf6e-7294-bec4-61de33b0fd11","type":"comment.liked","target":{"type":"comment","id":"01a0ee50-5438-763a-b07a-8ea3e9a84f69","preview":"Well done!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Well done!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0e8ca-0581-75b9-be14-26987f231930","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0ee50-5438-763a-b07a-8ea3e9a84f69"},"repost":null}},"context":{"type":"post","id":"01a0e8ca-0581-75b9-be14-26987f231930","preview":"TypeShift Section","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/01a0e8b6-bc56-75ec-bf22-3c3c9b6c8a49.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0e8ca-0581-75b9-be14-26987f231930","like":{"count":3,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-30T10:35:02.885Z","latestAt":"2026-09-30T10:35:02.885Z"},{"id":"01a0e8ca-07a9-7528-963d-344f43cf0987","type":"component.created","target":{"type":"component","id":"Qb9yWKMB8KIkWNQOxDYO","preview":"TypeShift Section","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/01a0e8b6-bc56-75ec-bf22-3c3c9b6c8a49.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-28T16:12:29.481Z","latestAt":"2026-09-28T16:12:29.481Z"},{"id":"01a0ce6c-58fa-75fe-9714-0d53f5cdf8b4","type":"creator.followed","target":{"type":"creator","id":"f478b0de-3860-430f-9abb-62a43584a990","preview":"Farhad Ahmed","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f478b0de-3860-430f-9abb-62a43584a990/1j68mb2i","slug":"design-with-farhad","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-23T13:20:02.277Z","latestAt":"2026-09-23T13:20:02.277Z"},{"id":"01a0bec0-8f76-74ea-a451-e0d2d08013e3","type":"creator.followed","target":{"type":"creator","id":"dea92497-e5e3-4712-8e62-d8aa1c6e17b0","preview":"S.Z.M. Abdul Malik Tusar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dea92497-e5e3-4712-8e62-d8aa1c6e17b0/n8208w4h","slug":"abdulmaliktusar","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T12:18:05.809Z","latestAt":"2026-09-20T12:18:05.809Z"},{"id":"01a0bec0-372c-716b-a5bb-aed4b4d0986d","type":"comment.liked","target":{"type":"comment","id":"01a0b1f9-c908-72e1-ada6-d8a76eb5add6","preview":"The stretch stays readable at both ends of the range.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The stretch stays readable at both ends of the range."}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a096ec-35b2-758f-a661-159476bdb432","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0b1f9-c908-72e1-ada6-d8a76eb5add6"},"repost":null}},"context":{"type":"post","id":"01a096ec-35b2-758f-a661-159476bdb432","preview":"TypeShift","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/01a096e8-e73a-763e-9c77-3f9ec168fac0.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a096ec-35b2-758f-a661-159476bdb432","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T12:17:43.207Z","latestAt":"2026-09-20T12:17:43.207Z"},{"id":"01a0bec0-0b72-704e-b4eb-6575111dc35a","type":"creator.followed","target":{"type":"creator","id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","preview":"PixlForm®","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d7b633f0-85d0-4e75-b61f-08c45984e34b/pdzpgzrh","slug":"pixl-form","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-20T12:17:32.013Z","latestAt":"2026-09-20T12:17:32.013Z"},{"id":"01a0af0a-4318-71ae-a557-35b86018ae3c","type":"creator.followed","target":{"type":"creator","id":"09bc3e24-752b-4a1b-97c2-ab8d755f63b8","preview":"Tauhid Hasan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09bc3e24-752b-4a1b-97c2-ab8d755f63b8/4taurhlo","slug":"tauhiduiux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:04:40.468Z","latestAt":"2026-09-17T11:04:40.468Z"},{"id":"01a0af0a-3fd0-7333-ab22-13873aac827c","type":"creator.followed","target":{"type":"creator","id":"10babd35-5d65-432b-a937-0d364862def7","preview":"Template Munk","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/987138/avatar-ab5H26kGpYaOYuIhN5LyueDxmZncxB.jpg","slug":"template-munk","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:04:39.627Z","latestAt":"2026-09-17T11:04:39.627Z"},{"id":"01a0af0a-3b77-758a-8207-c7ac46569e38","type":"creator.followed","target":{"type":"creator","id":"20b794d8-b712-479d-8572-13812d589ab6","preview":"Floyka Design Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/62848/avatar-FieFvLtWCfpmdsGVre1bpgGPZl1iGN.jpg","slug":"floyka","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:04:38.502Z","latestAt":"2026-09-17T11:04:38.502Z"},{"id":"01a0af0a-3710-746c-9cde-8d3aab0ea0bb","type":"creator.followed","target":{"type":"creator","id":"23af4f7c-bcc0-44bf-b2a1-0c62d31037de","preview":"Richa Jha","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/23af4f7c-bcc0-44bf-b2a1-0c62d31037de/p416zv2h","slug":"richa-jha","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:04:37.383Z","latestAt":"2026-09-17T11:04:37.383Z"},{"id":"01a0af0a-314b-750d-9827-915dc285fc08","type":"creator.followed","target":{"type":"creator","id":"28a14498-78b5-4be6-a426-54aaed07cae1","preview":"Design With Hoj","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/264574/KPv2HSTen-tiVB7hPYG8sqpfmzJmrtpkZdAstitN","slug":"hojjat-bandani","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:04:35.909Z","latestAt":"2026-09-17T11:04:35.909Z"},{"id":"01a0af0a-2b86-701b-9835-3a9254689637","type":"creator.followed","target":{"type":"creator","id":"4646fd31-4eba-4c42-8e8e-68ef4f848fd8","preview":"Peush Jha","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31194/avatar-4WafpCV2BWeCAJi7rkY7GjMf7YwL8z.jpg","slug":"peush-jha","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:04:34.426Z","latestAt":"2026-09-17T11:04:34.426Z"},{"id":"01a0af09-878a-765d-b28d-7df82e7ec231","type":"creator.followed","target":{"type":"creator","id":"530618d4-39d4-4326-822e-6adc8a89643b","preview":"Renatho","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/530618d4-39d4-4326-822e-6adc8a89643b/1mfjjuaw","slug":"renatho","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:03:52.448Z","latestAt":"2026-09-17T11:03:52.448Z"},{"id":"01a0af09-751d-77e9-987b-c0dabfa5ee38","type":"creator.followed","target":{"type":"creator","id":"55e66b8b-bd81-4efe-9f12-b81d28c78988","preview":"Yaroslav","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1448889/avatar-r3OcUBHK7vNpsK2jpsBm7bkjS9Ud3z.jpg","slug":"yaroslav-cherevaty","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","slug":"periphi-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-17T11:03:47.727Z","latestAt":"2026-09-17T11:03:47.727Z"}],"pagination":{"next":"MjAyNi0wOS0xN1QxMTowMzo0Ny43MjdafDAxYTBhZjA5LTc1MWQtNzdlOS05ODdiLWMwZGFiZmE1ZWUzOA","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:49102070-49db-406c-8cbf-f0bb12ac282a:/unified/posts/?creator=49102070-49db-406c-8cbf-f0bb12ac282a&with=reposts":[{"data":[{"id":"01a10217-9f91-7144-ac5b-ce4f5f19459f","title":null,"body":"

TypeShift Section in motion.

One image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition.

Use it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer.

Watch the scroll transition, then explore the component: https://framer.link/QzBUCJy

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift Section in motion."}]},{"type":"paragraph","content":[{"type":"text","text":"One image or muted video stays in focus while oversized word rows reshape with the scroll. The same section shifts from an even desktop split to a stacked mobile composition."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for a short manifesto, process story, portfolio intro, or launch statement—and customize the media, phrases, type, color, spacing, and motion directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Watch the scroll transition, then explore the component: "},{"type":"text","text":"https://framer.link/QzBUCJy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/QzBUCJy","target":"_blank"}}]}]}]},"author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/ylNlAKL00Yyc1qJJ5xSJtv9BVWJohJPqE4YsdD02zTwZ8.m3u8","metadata":{"posterUrl":"https://image.mux.com/ylNlAKL00Yyc1qJJ5xSJtv9BVWJohJPqE4YsdD02zTwZ8/thumbnail.webp?time=2.967","aspectRatio":"4:3","duration":11.4}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-03T14:07:45.046Z","updatedAt":"2026-10-03T14:07:45.046Z"},{"id":"01a0e8ca-0581-75b9-be14-26987f231930","title":null,"body":"

Just launched TypeShift Section — a split-screen media and elastic typography component for Framer.

Keep an image or muted looping MP4 in view while oversized word rows stretch and compress with the page scroll. It gives short brand statements more rhythm and presence than a static image-and-heading layout.

Highlights:

- Image or muted MP4 with a poster

- Two editable phrases and flexible type styling

- Responsive split-to-stack layout

- Manual and reduced-motion states

Built for studio stories, craft processes, portfolio introductions, launches, and campaign statements.

Open the attached product to try the live preview. I would love to hear what you build with it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just launched TypeShift Section — a split-screen media and elastic typography component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Keep an image or muted looping MP4 in view while oversized word rows stretch and compress with the page scroll. It gives short brand statements more rhythm and presence than a static image-and-heading layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Highlights:"}]},{"type":"paragraph","content":[{"type":"text","text":"- Image or muted MP4 with a poster"}]},{"type":"paragraph","content":[{"type":"text","text":"- Two editable phrases and flexible type styling"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive split-to-stack layout"}]},{"type":"paragraph","content":[{"type":"text","text":"- Manual and reduced-motion states"}]},{"type":"paragraph","content":[{"type":"text","text":"Built for studio stories, craft processes, portfolio introductions, launches, and campaign statements."}]},{"type":"paragraph","content":[{"type":"text","text":"Open the attached product to try the live preview. I would love to hear what you build with it."}]}]},"author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Qb9yWKMB8KIkWNQOxDYO","resolved":true,"title":"TypeShift Section","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift Section turns one media moment and a few words into a focused editorial sequence. Its split-screen keeps the visual and message together while oversized elastic type reshapes as visitors scroll. Use it for studio stories, craft processes, portfolio introductions, launches, and campaign statements."}]},{"type":"customHeading","content":[{"type":"text","text":"Why it works"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Media establishes atmosphere while elastic type gives short copy hierarchy and movement. A transition between two phrases creates a visual beat instead of a static headline beside an image."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can change"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Edit the image or video, poster, two phrases, typeface, colors, fit, focus, spacing, panel heights, scroll travel, and header offset from Framer's property panel. The second phrase is optional, and Manual mode provides a still state."}]},{"type":"customHeading","content":[{"type":"text","text":"How it fits your page"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"At 700px component width and above, media and type split the width evenly. Below 700px, media flows above the type panel while page scrolling drives the transition. Set Width to Fill and Height to Fit Content, keep the parent unclipped, and match Header offset to any fixed navigation."}]},{"type":"customHeading","content":[{"type":"text","text":"Video and accessibility"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"An image can serve as the poster while video loads or cannot play. MP4 video is muted with no player controls. Reduced-motion settings show the poster and complete text without the pinned effect. Use licensed media and meaningful image alt text."}]},{"type":"customHeading","content":[{"type":"text","text":"What to expect"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"This is one Framer Code Component with property controls, not a website template, native text-layer pack, stock-video library, or CMS slider. A lightweight default image completes the first insertion; replace it with your own image or MP4. Character support depends on the selected typeface."}]},{"type":"paragraph","content":[{"type":"text","text":"Support: "},{"type":"text","text":"hello@periphi.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hello@periphi.com","target":"_blank"}}]}]}]},"introduction":"Split-screen media, elastic type","slug":"typeshift-section","author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/01a0e8b6-bc56-75ec-bf22-3c3c9b6c8a49.png","metadata":{"tint":{"h":0,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T16:12:28.296Z","updatedAt":"2026-09-28T16:12:28.296Z","publishedAt":"2026-09-28T16:12:28.291Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://periphi-typeshift-section.framer.website/","price":"12","paymentUrl":"https://buy.polar.sh/polar_cl_lDe7U9ybWTgtq8KI8StGZ6gUx6rdc3u5gzMcj0Krfl5","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"8NMfbeDpvw1EP4SdObKf","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T16:12:28.930Z","updatedAt":"2026-09-28T16:12:28.930Z"},{"id":"01a096ec-35b2-758f-a661-159476bdb432","title":null,"body":"

Hi everyone, here’s TypeShift — a Framer component that stretches and compresses text as you scroll.

You can customize the words, typeface, and colors to make it your own. We’d love to hear what you think and see how you use it in your projects.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi everyone, here’s TypeShift — a Framer component that stretches and compresses text as you scroll."}]},{"type":"paragraph","content":[{"type":"text","text":"You can customize the words, typeface, and colors to make it your own. We’d love to hear what you think and see how you use it in your projects."}]}]},"author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CrEi8P2fMHSNA8Klmi5D","resolved":true,"title":"TypeShift","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"TypeShift stretches and compresses word rows as visitors scroll. Create expressive brand manifestos, portfolio introductions, and landing-page sections with one elastic typography panel."}]},{"type":"customHeading","content":[{"type":"text","text":"Customize in Framer"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two editable phrases, up to six non-empty rows each. The second phrase is optional."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typeface, text and background colors, row gap, and inset."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Normal, clockwise, or counterclockwise orientation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent panel height and scroll distance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Manual playback for a still state without pinning or extra scroll space."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Setup and scroll space"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Use a vertical Stack. Set component Width to Fill and Height to Fit Content. Keep parent height content-sized and Overflow: Visible; check ancestor overflow if pinning fails."}]},{"type":"paragraph","content":[{"type":"text","text":"Total height = panel height + Scroll distance. Defaults: 600px + 1000px = 1600px. The extra space drives the animation."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose Viewport with height 100 for a viewport-filling panel, or Fixed for breakpoint-specific heights. Preview from the page top."}]},{"type":"customHeading","content":[{"type":"text","text":"Reduced motion"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"In Scroll mode, a browser-reported reduced-motion preference shows all text without animation and fits height to the content. Extra scroll space and internal scrolling are removed. This is not iOS-only; a fixed-height parent can still retain its own space."}]},{"type":"paragraph","content":[{"type":"text","text":"Not seeing the scroll animation?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"On iOS, when Settings → Accessibility → Motion → Reduce Motion is turned on, TypeShift displays the full text without animation."}]},{"type":"customHeading","content":[{"type":"text","text":"Before you buy"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Requires Framer. One Code Component with property controls, not a website template or native editable glyph layers. Uses preset word-row layouts. Font character coverage depends on your typeface. Fixed-header offsets are not automatic. No third-party API keys or backend setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Support: "},{"type":"text","text":"hello@periphi.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hello@periphi.com","target":"_blank"}}]}]}]},"introduction":"Scroll-driven elastic typography","slug":"typeshift","author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/01a096e8-e73a-763e-9c77-3f9ec168fac0.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-12T18:40:57.211Z","updatedAt":"2026-09-12T18:40:57.211Z","publishedAt":"2026-09-12T18:40:57.207Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://periphi-typeshift.framer.website/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_ZdKHzdbTDPCum1fhp1Z7jFVzPYC4wwkiWACaX1oCvbV","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"hxhV6w9quI7mTZbC9pKY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-12T18:40:57.778Z","updatedAt":"2026-09-12T18:40:57.778Z"},{"id":"01a0879a-32ff-7560-a795-f8a2d6719c8e","title":null,"body":"

Just launched Orbit Selector — a radial, scroll-led section for turning feature lists into guided visual stories.

Responsive across desktop, tablet, and mobile, with editable content, styling, motion, and direct navigation. Built for service highlights, product features, processes, portfolios, and brand stories.

Explore the live preview and make it yours.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just launched Orbit Selector — a radial, scroll-led section for turning feature lists into guided visual stories."}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive across desktop, tablet, and mobile, with editable content, styling, motion, and direct navigation. Built for service highlights, product features, processes, portfolios, and brand stories."}]},{"type":"paragraph","content":[{"type":"text","text":"Explore the live preview and make it yours."}]}]},"author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"NCEKpOMrYKMsPtvw0w7u","resolved":true,"title":"Orbit Selector","body":"$54","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Turn a simple feature list into a guided visual story"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Orbit Selector keeps your main message centered inside a graduated circular dial while visitors move through an animated item list and focused detail card. Let the page scroll guide the sequence, or let visitors explore directly with click, keyboard, and mobile swipe controls."}]},{"type":"customHeading","content":[{"type":"text","text":"What's included"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive desktop, tablet, and mobile layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll progression, direct selection, and optional wheel snapping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable items, images, supporting details, and CTA"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flexible typography, colors, spacing, corners, and motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Outline, Solid, and Text CTA styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard navigation, accessibility labels, and reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No CMS or separate code override required"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Make it yours"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add, remove, and reorder items from the property panel, then match the section to your brand without editing code."}]},{"type":"customHeading","content":[{"type":"text","text":"Best for"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Service highlights, product features, processes, portfolios, and brand stories with 3–8 items."}]},{"type":"customHeading","content":[{"type":"text","text":"Quick setup"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Paste the Component URL onto your Framer Canvas, set Width to Fill and Height to Fit, and customize from the property panel."}]}]},"introduction":"Scroll-led feature storytelling","slug":"orbit-selector","author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/01a08797-c586-7051-a466-cc1e06e1acd8.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-09T19:17:04.367Z","updatedAt":"2026-09-10T14:23:53.398Z","publishedAt":"2026-09-09T19:17:04.361Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://orbit-selector.framer.website","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_rdHY1TE5zAJz9Ht7or1hleKbVmetHoRfP4Yzn10QxSk","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"3wz3bS3tBHBZ5AcMspM6","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-09T19:17:04.895Z","updatedAt":"2026-09-09T19:17:04.895Z"},{"id":"019fe9f4-d671-7432-b10b-5d389ddbbb31","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"71027","resolved":true,"title":"Wheat & Yeast Basic","body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Wheat & Yeast Basic is a warm, editorial Framer template for artisan bakeries, sourdough studios, neighborhood cafés, pastry studios, and independent food brands."}]},{"type":"paragraph","content":[{"type":"text","text":"Wheat & Yeast Basic translates the natural rhythm of a real bakery—what you bake, when it comes out of the oven, how it's made, and the stories behind it—into one responsive, easy-to-edit website. Rich food imagery, expressive typography, and a restrained cream-and-cocoa palette create a crafted look without sacrificing clarity."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT’S INCLUDED","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"• Four structured CMS collections: Products, Bake Schedule, Baker’s Notes, and Bakery Settings "}]},{"type":"paragraph","content":[{"type":"text","text":"• A filterable menu with CMS-powered product detail pages "}]},{"type":"paragraph","content":[{"type":"text","text":"• Daily bake schedules linked to product content "}]},{"type":"paragraph","content":[{"type":"text","text":"• Editorial Baker’s Notes featuring rich-text articles "}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive layouts for desktop, tablet, and mobile "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reusable components, an editable hero video, custom interactions, and an English CMS user guide"}]},{"type":"paragraph","content":[{"type":"text","text":"Built for bakeries and food brands that primarily operate in person. Simply replace the demo content, update your global bakery settings, and publish directly from Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Please note: Wheat & Yeast Basic intentionally focuses on brand presentation. It does not include online ordering, reservations, cart functionality, payment processing, real-time inventory management, or sold-out states.","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":" "}]},{"type":"paragraph"}]},"introduction":"CMS Template for Artisan Bakeries","slug":"wheat-yeast-basic","author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/ycMVMmcYH83V6LplRBgwZluJvrxOo5uc6SxP2TiXg1s.m3u8","metadata":{"posterUrl":"https://image.mux.com/ycMVMmcYH83V6LplRBgwZluJvrxOo5uc6SxP2TiXg1s/thumbnail.webp?time=4.733","aspectRatio":"4:3","duration":8.866667}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/019fe9f2-5b8e-7758-823c-b8faceb70475.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/019fe9f2-9008-757e-bed9-9d9156a90359.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-10T04:36:04.285Z","updatedAt":"2026-08-10T04:36:04.285Z","publishedAt":"2026-08-10T04:36:04.282Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"59","paymentUrl":"https://buy.polar.sh/polar_cl_Iwd97wuQVSweHIPvSb3n1esjBHFQxJpVKb0Rh0vLxmY","remixUrl":null,"previewUrl":"https://wheat-and-yeast-bakery.framer.website/","categories":[{"id":115,"name":"Food","slug":"food"},{"id":191,"name":"Bakery & Cafe","slug":"bakery-and-cafe"}],"styles":[],"mainCategory":{"id":115,"name":"Food","slug":"food"},"features":[{"id":21,"name":"CMS","slug":"cms"},{"id":23,"name":"Rich Media","slug":"rich-media"},{"id":37,"name":"Code Components","slug":"code-components"}],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-10T04:36:04.850Z","updatedAt":"2026-08-10T04:36:04.850Z"},{"id":"019dfd77-f973-7a4d-9001-349de430a29c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"se7K6gzPxyUoLv0w2MFv","resolved":true,"title":"Stats Section","body":"$56","bodyJson":null,"introduction":"Animated counter that counts up on scrol","slug":"stats-section","author":{"framerUserId":"49102070-49db-406c-8cbf-f0bb12ac282a","name":"Periphi Studio","slug":"periphi-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/49102070-49db-406c-8cbf-f0bb12ac282a/1lkz5ff7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/se7K6gzPxyUoLv0w2MFv/stats-section-8AzU0nH5E7qk7nHYgNurKBpHzZt4tt","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-22T17:55:37.589Z","updatedAt":"2026-05-05T19:28:35.318Z","publishedAt":"2026-05-06T13:26:31.539Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/StatsSection-n7ZGfl.js@EluX29wrAkppvSEi5jLA","previewUrl":"https://elated-weather-756922.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"EluX29wrAkppvSEi5jLA","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":286,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T13:26:31.539Z","updatedAt":"2026-05-06T13:26:31.539Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L57"}]