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:T5ca,

Aisol CMS Select is a native dropdown for Framer Forms whose options come from a Collection List, so new CMS items show up in the form without editing it.

It can open with an option already chosen, from a URL like /apply?course=design-systems or from a Default you bind to a CMS field on a detail page.

It only reads the list you drop in and never writes to it, and because it is a real select, keyboards, screen readers and phone pickers work as usual.

- Each CMS item gives one option from its Option layer; an optional Value layer (e.g. the slug) is what the form sends.

- Without a list, the Options you type in the panel are used, so it works the moment you drop it in.

- Matches by label, value or slug, and a visitor's own choice is never overwritten.

- It grew out of the Lyceum Academy template, where every course page opens the apply form with that course picked.

What you control

• Options from a Collection List, or typed in, plus extra options at the end

• Option and Value layer names

• Default option and URL parameter for preselect

• Field name, placeholder, screen reader label, required

• Font, text size, height, radius and five colours

Limits: turn off the Collection List's pagination so every item is read; the open option list is the browser's own and cannot be styled; options from the CMS appear on the live site, the canvas shows the typed Options.

53:T67f,

For course creators, bootcamps and learning studios that run live cohorts.

Lyceum Academy is a calm, editorial template for an online academy with several courses. Courses, instructors and journal posts all live in the CMS, so adding a new cohort is one new item: the course page, the schedule and the cards update with it.

What's inside:

16 page templates: Home, Courses, Course detail, Instructors, Instructor detail, Schedule, Pricing, Journal, Journal post, About, Contact, Apply, Thank you, Privacy, Terms and 404
5 CMS collections: Courses (curriculum, start date, schedule, price, instructor), Instructors, Journal, Weekly Sessions and Plan Comparison, so even the timetable and the pricing table are edited as CMS items
Working forms: Contact, Apply and a newsletter sign-up, all leading to a thank-you page. The Apply course list comes straight from the CMS, and every Apply button on a course page opens the form with that course already selected
Shared color and text styles, plus reusable Navigation, Button, Plan Card, CTA Banner, Course Card, Instructor Card and FAQ components: change a price or a call to action once and every page follows
Desktop, tablet and phone layouts on every page

Built to be edited: change the colors or fonts once in the styles and the whole site follows.

Support: u6219804@gmail.com. Refunds: this is a digital product delivered instantly, so purchases are non-refundable once delivered. If the template doesn't work as described, email us within 7 days and we'll fix it or refund you in full.

54:T4f5,

Aisol Silk Banner is one continuous strip of cloth that flows across the page with your words and small images printed on it.

Waves travel along the strip, and the cloth bulges where the pointer passes, then springs back.

A pause button is shown by default, it stops drawing off screen and in hidden tabs, and it starts paused for visitors who prefer reduced motion.

- Built-in words and image tiles fill the strip until you add your own.

- It never captures scrolling: wheels and swipes keep moving the page.

- The printed words are also listed once for screen readers.

- Need drag, snapping and captions? The paid sibling is Aisol Silk Carousel.

What you control

• Items (up to 24): words or images

• Cloth: colour, height, wave size and count, sheen

• Motion: speed, direction, slow down on hover

• Touch: how far the cloth bulges under the pointer

• Text: size, serif or sans, colour, separator

• Pause button, background, accessible label and an optional link

Limits: items are entered in the property panel (no CMS binding); while it is visible and playing it keeps drawing, like any marquee; the cloth needs WebGL, and without it a plain CSS marquee is shown.

55:T477,

Build note: making a carousel bend like cloth, and stop when it's still.

The idea was simple: the faster you drag, the more the panels curve. Getting there took three tries.

• Measuring speed. My first version read speed from frame to frame, so a slow laptop and a fast one bent differently. It now uses the pointer samples from the last 100 ms, so the same drag gives the same bend on any screen.

• Settling. The bend runs on a damped spring. It overshoots once or twice and then snaps exactly flat, so the resting frame matches the page before any WebGL loads.

• Stopping. An idle "breeze" looked nice but kept the GPU busy the whole time the page was open. I turned it off by default and checked the published page: while nothing moves, the component draws zero frames. It also stops off screen and in hidden tabs.

One Framer surprise: after I changed a control's default in code, the published page kept the old value that was saved on the instance. Re-saving the instance fixed it. Worth knowing if you ship code components.

The clip is recorded from Aisol Silk Carousel.

56:T713,

Aisol Silk Carousel is an endless row of image and video panels that bend like fabric while you drag them: the leading edge lags and the trailing edge follows.

Let go and the row glides, snaps to the nearest slide and the panels settle flat; an optional breeze adds a slight sway while the row is still.

It works with mouse, touch, trackpad and keyboard, pauses when off screen, and turns the bending off for visitors who prefer reduced motion.

- Eight built-in editorial posters fill the slides until you add your own images.

- Horizontal swipes move the row while vertical swipes still scroll the page; a sideways trackpad swipe moves it, a plain wheel does not.

- Arrow, Home and End keys move between slides, and the current slide is announced as “n of N”.

- Videos play muted only near the active slide and fall back to their poster if autoplay is blocked.

What you control

• Slides (up to 30): image, optional video, title, meta, link and link label

• Layout: panel width, aspect ratio, gap, corner radius

• Silk: bend, ripple, settle speed, breeze

• Motion: drag, snap, autoplay and interval

• Captions: show, below or overlay, text size, colour

• Controls: arrows, dots or progress line

• Theme: transparent or background colour, accent, accessible label

Limits: slides are entered in the property panel (no CMS binding); captions use a system font stack rather than your site font; images must allow cross-origin use to bend (Framer uploads do), otherwise that slide shows flat; bending and video need WebGL, and without it the carousel falls back to a plain scroll-snap row; videos are muted.

For a flowing cloth banner with a pause button, see the free sibling Aisol Silk Banner.

57:T4dd,

Build note: a world map with no tile server.

Most map components load tiles from Google, OpenStreetMap or Carto, so every visit sends a request to a third party and many need an API key. For our last two components I tried the opposite and baked the world into the code: Natural Earth coastlines (public domain), projected to Equal Earth and simplified into a single 25 KB SVG path. The land dots are an SVG pattern whose spacing is recalculated on zoom, so they keep the same size on screen.

Three things that took more than one try:

Scrolling. A plain wheel now scrolls the page and only Ctrl or ⌘ zooms the map. On phones one finger scrolls the page and two fingers move the map. We measured both on the published site.

The first view. Measuring the frame in JavaScript to fit all pins would make the server and browser draw different frames, so the fit is done with CSS container units. On a 390 px phone the first version cut off Japan and Australia; this fixed it.

Text sizes. The panel started with eleven unrelated font sizes. It now uses one scale (14 px base, ratio 1.125) tied to a single Text Size control.

The two are Aisol Office Map and Aisol Dot Globe; the clip is recorded from them.

58:T62c,

Aisol Office Map shows your offices, studios or stores on a dotted or solid world map drawn inside the component, next to a list with search and region filters. It loads no tiles and needs no API key. On narrow frames the list becomes a bottom sheet.

Choosing a place moves the map to it and opens a card with its photo, address, hours and a link or directions button. Nearby pins merge into a count until you zoom in.

- Search ignores accents and case ("sao" finds São Paulo).

- A plain wheel scrolls the page; Ctrl or ⌘ plus wheel zooms. On touch, two fingers move the map.

- Each office in the list is a button: arrows move, Enter opens a card, Esc closes it. With the list off, Tab reaches the map pins instead.

- Fly Time sets how long the move takes, with Drag on or off. Reduced motion jumps instantly.

- Animation stops when the map is off screen or the tab is hidden.

What you control

• Locations (up to 60): name, city, country, region, latitude, longitude, address, hours, button label, link, photo

• Map: dots or solid, colours, dot grid and size

• Pins: colour, size, pulse, labels

• Panel: title, search, region filters

• Card: photo, directions, new tab

• Interaction: open first card, drag, zoom buttons, fly time, focus zoom

• Theme: font, text size, colours, radius, label

Limits: city-level map with no streets or place names; Antarctica is not shown. Locations are typed as latitude and longitude, with no CMS binding or address lookup.

59:T834,

Aisol Dot Globe draws the world as a dotted 3D globe in three.js, with your cities as pins and labels that hide when they turn to the far side.

Visitors can drag the globe to spin it and it keeps turning briefly after release; at rest it rotates slowly, and animated arcs can connect your cities in a chain or from one hub.

The land shape is stored inside the component, so it loads no map tiles or other files and needs no API key; the Framer canvas and browsers without WebGL show a flat drawing of the same globe.

Coastlines come from Natural Earth map data (public domain), sampled into dots you can make denser, larger or recoloured.
Once it has focus, arrow keys turn and tilt the globe and Home resets it; a vertical swipe on touch screens still scrolls the page.
Drawing stops when the globe is off screen or has nothing to animate; reduced motion turns off auto-rotate, arcs and pulses but keeps dragging.
Label outlines switch between dark and light so labels stay legible on either background.

What you control

Pins: label, latitude and longitude for each city
Markers: colour, size, pulse, labels and label colour
Globe: size, dot colour, dot size, density, ocean colour and opacity, glow colour and strength
Arcs: Off, Chain or Hub, colour and speed
Motion: auto-rotate and its speed, drag, starting longitude and tilt
Background: transparent or a colour, and an accessible label

For a searchable locations list on a flat map, see the paid sibling Aisol Office Map.

Limits: pins are placed by latitude and longitude (no address lookup or CMS binding), very small islands can drop out at this map resolution, labels use the system sans-serif rather than your site font, and without WebGL2 the flat drawing is shown and cannot be dragged.

5a:T61f,

A name badge hanging from a lanyard, rendered in three.js. Visitors can grab it, swing it and throw it; flicking an edge turns it over to the back.

Card faces

- Front image and Back image are always in the panel, so you can connect them to CMS image fields. When an image is set, it covers that face. When it is empty (or cannot be loaded), the face is drawn from your fields instead.

- The drawn front uses Name, Role, Organisation, Event, Tag and an optional round Photo (initials without a photo). The drawn back uses Organisation, Event and Tag.

- Portrait, landscape or square card in Gloss, Matte or Holographic.

- The strap takes your colour, width, length and printed text.

Motion

- Drops in when it first scrolls into view and sways gently at rest.

- Only a press on the badge grabs it, so page scrolling keeps working.

- Arrow keys push and flip the badge once it has focus. With a link set, a click (not a drag) or Enter opens it.

- Reduced motion turns off drop-in and sway but keeps dragging.

- The animation stops while the badge is off screen or the tab is hidden, and sleeps once the badge has settled.

Fallbacks

- Shows a flat badge on the Framer canvas and where WebGL is unavailable, using your front image when one is set.

Notes

- Images must allow cross-origin loading to appear on the 3D card.

- Upgrading from v1: the Card (Template / Images) switch is gone. A set Front or Back image now always shows; clear it to go back to the drawn face.

5b:T622,

Logo Extrude 3D turns an SVG logo into a bevelled 3D object: upload an SVG file or paste its code, and its filled shapes, holes included, are extruded, centred and fitted to the frame.

Pick Chrome, Glass, Clay, Gold or Holographic, or your own colour, roughness and metalness; reflections are built in code, so no image files are downloaded.

It turns around Y or X or with a wobble, can be dragged with inertia or turned by page scroll, draws nothing while still or off screen, and shows a flat logo on the canvas and where WebGL is unavailable.

Depth and bevel scale with the logo, so they look the same at any SVG size.

Reads paths (arcs included), rects, circles, ellipses, polygons and polylines, with group transforms and both fill rules.

Under reduced motion, auto-rotate and scroll turning are off; dragging still works.

What you control

SVG file or SVG code; depth (1–80 %), bevel (0–8 %), bevel steps (1–10)

Material preset or Custom (colour, roughness, metalness); light (0–3)

Auto rotate with speed (0–180 °/s) and axis (Y, X, Wobble); drag; scroll turn with scroll angle (10–720 °)

Transparent or background colour, padding (0–200 px), scale (10–400 %), accessible label

Limits: only filled shapes are extruded (no strokes, text, gradients or images), shapes painted over others, such as white knock-outs, become solid, the whole logo uses one material, and an SVG file is only read when it is uploaded to Framer (other hosts are ignored; paste the SVG code instead).

5c:T798,

Paper Flipbook turns your images into a book you page through: each page bends as it turns, with shading along the fold, a soft spine shadow and a shadow cast on the page underneath.

Turn pages by dragging a page, clicking or tapping either half, using the arrow buttons, or with the keyboard once the book has focus; add one image per page, cover first, or leave the list empty to show twelve built-in demo pages.

It draws frames only while a page is moving and stops when scrolled off screen; the Framer canvas and browsers without WebGL show the same spread as a static layout, reduced motion changes pages instantly, and a polite live region announces the pages in view.

A dragged page stays under your pointer and, on release, completes the turn or falls back depending on how far and how fast you moved it; with a mouse, hovering near the outer edge lifts the page slightly.
Keyboard: Left/Right arrows and Page Up/Page Down turn pages, Home goes to the cover and End to the last page.
Hard cover keeps the front cover rigid (and the back cover when the page count is even); a closed cover sits centred.
Optional autoplay turns a page every few seconds, reverses at either end, and pauses on hover, on focus and while off screen.

What you control

Pages (one image each, up to 200, cover first), page ratio (3:4, 2:3, 4:5, A4, 1:1, 4:3, 3:2), start page, hard cover
Curl, paper thickness and shadow strength (0–1 each)
Background and accent colours
Autoplay and interval (1–30 s), arrow buttons, page number counter, drag to turn, accessible label

Limits: it always shows a two-page spread (no single-page mode at narrow widths), pages are images only, and image hosts must allow cross-origin loading for the 3D pages (images uploaded to Framer do).

5d:T534,

Phone Flow walks through your app screens inside a phone frame: on each screen a tap ring pulses at the point you set, then the next screen slides, fades or pushes in.

Each screen is a component instance from your project with its own tap position and hold time, and screens without one show a built-in grey wireframe layout.

Autoplay starts once it is in view and pauses on hover, off screen or with the pause button, and the Framer canvas and reduced motion start on the last screen with no animation.

Slide, fade or push transitions, looping in both directions or stopping at the last screen.
Previous, pause and next buttons, progress dots, and arrow keys and Space when the frame has focus.
Frame colour, frame thickness, screen radius, tap colour and tap size are all adjustable.

What you control

Screens (component instance, label, tap X %, tap Y %, hold time 200–6000 ms)
Transition (slide, fade, push), autoplay, loop
Progress dots and previous, next and pause buttons on or off
Tap colour and size (10–80 px), frame colour, frame thickness (2–36 px), screen radius (4–48 px)

Limits: the taps are an animation, not real input into your screens.

5e:T623,

Agent Chat plays a scripted conversation: each user message is typed into the input bar and sent, then the assistant pauses, can show a tool step, and replies word by word.

You write the messages and set typing speed, pause, colours, font, radius and height; it starts when it scrolls into view or on page load, and loops by default.

The Framer canvas and reduced motion show the whole conversation at once with no timers, screen readers can read the finished messages, and the final reply is announced through a polite live region.

Messages are a list of user and assistant turns; while the assistant thinks, three dots bounce, and a turn with a Tool label shows a spinner chip that turns into a check.
User text types in character by character with a blinking caret; assistant replies appear one word at a time.
The transcript scrolls itself to the newest message, and a restart button appears in the header when a non-looping chat ends.

What you control

Messages (role, text, optional tool label), header title and subtitle
Typing speed (4–120 characters per second), pause before each reply (120–4000 ms), loop, start (in view or on load)
Background, surface, user bubble, user text, reply text, accent and border colours
Font, corner radius (0–40 px), height (260–900 px)

Limits: it replays the messages you write; visitors cannot type into it, and it does not connect to any AI service.

5f:T60e,

Footer Field is a complete site footer with a giant wordmark that rises into place the first time it is seen, then reacts to the pointer: letters are pushed away by the cursor and spring back. On touch screens a tap sends a ripple through the letters.

What you get:

- Up to five link columns. Add links as rows with a page picker (Footer links: column, label, link). The older one-link-per-line text field still works as a fallback.

- Optional logo image with its own link, and Social links rows with a page picker in the bottom bar.

- Copyright line and a Back to top link to any section.

- Columns wrap from up to five to two and then one by the footer's own width, not the window. Below 600px the padding halves and the bottom bar stacks.

- Three theme presets (Ink, Paper, Signal) or six custom colours. Fonts, text size, wordmark weight, fit-to-width or fixed size, left or centre alignment and heading level.

Accessibility and performance:

- Real footer landmark, one navigation region per column named by its title, and a named social links region.

- Every link is a real anchor with a visible name; external links open in a new tab and say so to screen readers. Unsafe link schemes are shown as plain text.

- Keyboard focus ring on every link. Reduced motion shows a still wordmark.

- Animation runs only while letters move and stops at rest. No window or document listeners; only nodes inside the component are touched.

- Still wordmark on the Framer canvas.

60:T622,

Use it with CMS in three steps: 1. Drop a Collection List into Screens (CMS) and turn off its Pagination. 2. In the item, add an image or video layer named Media, plus text layers named Title and Caption. 3. Every item becomes one screen on the stage; the caption shows its Title, Caption and the item's link, and the dots follow the item count.

Screens (CMS) reads each item and draws it on the device screens itself, so your list stays untouched. The list is hidden after reading, so a Load more button is not shown.

Your product screens in generic laptop, tablet and phone frames; every device shows the same screen.

Key features

- The Media layer fills the screen. Turn Fill With Media off for Whole item: a copy of the CMS item is shown as you designed it (static, no hover or interactions).

- Videos from the Media layer play muted, only on the active screen and only while the stage is on screen.

- Autoplay with a pause button; it pauses on hover and focus.

- Previous, next and one dot per screen, plus arrow keys, Home and End.

- Reduced motion respected.

What you control

- Screens (CMS) slot, layer names for Title, Caption and Media, or hand-made Items

- Devices: laptop, tablet, phone or a pair; fit cover or contain

- Autoplay, interval, fade or slide, and Duration for every transition

- Caption, controls, heading level, colours, font, size and labels

The canvas shows the Collection List as you built it; the stage runs in Preview and on the published site.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-82d016d2-8113-4080-8f2a-7c3796dceab4-all:/unified/creator/82d016d2-8113-4080-8f2a-7c3796dceab4/activity/":[{"data":[{"id":"01a112e5-0700-70f5-839e-1c7c4f07cca1","type":"component.created","target":{"type":"component","id":"zQXVj3DCpsFRWWBEqiNo","preview":"Aisol CMS Select","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a112e4-88bf-75f9-838b-6624e2c8f6e6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-06T20:26:01.856Z","latestAt":"2026-10-06T20:26:01.856Z"},{"id":"01a10d34-931f-74ce-a691-f6dddf1403f8","type":"template.created","target":{"type":"template","id":"74828","preview":"Lyceum Academy","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a10d30-efb6-7031-bb43-70df6fde8ade.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-10-05T17:55:11.775Z","latestAt":"2026-10-05T17:55:11.775Z"},{"id":"01a0eef3-d7e0-70d8-937a-d3f0a124ae41","type":"component.created","target":{"type":"component","id":"T44ULfh9I3pDhZAg4kyP","preview":"Aisol Silk Banner","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0eef3-b1cf-778b-8111-16c4801ecd0c.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-29T20:55:53.056Z","latestAt":"2026-09-29T20:55:53.056Z"},{"id":"01a0edbb-fd2e-760f-adca-5275c4125471","type":"component.created","target":{"type":"component","id":"t4iePbhU5RUOQFas5pYw","preview":"Aisol Silk Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0edbb-d4b3-76c8-9eb8-628e9591374d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-29T15:15:15.374Z","latestAt":"2026-09-29T15:15:15.374Z"},{"id":"01a0e7d5-dfd8-779e-936a-52314083ff22","type":"component.created","target":{"type":"component","id":"jDUglx6nTfkwbR8Es9q4","preview":"Aisol Office Map","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e7d5-9d3f-7474-a19c-941bbe1f3198.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-28T11:45:48.504Z","latestAt":"2026-09-28T11:45:48.504Z"},{"id":"01a0e7c5-abca-7275-b948-5646142baa76","type":"component.created","target":{"type":"component","id":"jc1u9OiVnVkL0QlNh7Kh","preview":"Aisol Dot Globe","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e7c5-4a14-765f-bf52-0f25042a5700.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-28T11:28:06.602Z","latestAt":"2026-09-28T11:28:06.602Z"},{"id":"01a0e48d-b57b-77e2-b763-046f95f95846","type":"component.created","target":{"type":"component","id":"tf9fFYjORHONTUGKJuP9","preview":"Lanyard Badge","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4ad-e014-754c-ab0e-d69fc9e98146.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-27T20:28:07.419Z","latestAt":"2026-09-27T20:28:07.419Z"},{"id":"01a0e3f4-3aed-77c9-b2b0-f7277de25e14","type":"component.created","target":{"type":"component","id":"qath1iMa4RaxyJ44N9DV","preview":"Logo Extrude 3D","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b2-57e1-7331-8e62-c74574f3a14d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-27T17:40:29.037Z","latestAt":"2026-09-27T17:40:29.037Z"},{"id":"01a0e3ed-f56e-733b-8b0d-a0395bb1dfef","type":"component.created","target":{"type":"component","id":"P35Da7UzweXpZhKbVZXO","preview":"Paper Flipbook","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b0-6794-75b9-8311-887e6aaba9c6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-27T17:33:38.030Z","latestAt":"2026-09-27T17:33:38.030Z"},{"id":"01a0dc96-e878-74a6-b31a-d23469ebaf79","type":"component.created","target":{"type":"component","id":"CqPILX4j2Rry9VMWvn0Q","preview":"Phone Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0dc96-8200-73a9-bcdf-502c69addf9f.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-26T07:21:12.568Z","latestAt":"2026-09-26T07:21:12.568Z"},{"id":"01a0dc93-30bc-77cb-9c30-20e27ba80de6","type":"component.created","target":{"type":"component","id":"bhqxfsDuXSWDP14vba3d","preview":"Agent Chat","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0dc91-da1f-71ed-b935-0c086ca39e1e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-26T07:17:08.924Z","latestAt":"2026-09-26T07:17:08.924Z"},{"id":"01a0da19-33ad-71d8-8805-4781b9948c6e","type":"component.created","target":{"type":"component","id":"V2GLXk8RU5tID2MeOwWR","preview":"Footer Field","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0df91-476a-74fe-a686-18bc7575ee39.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-25T19:44:39.853Z","latestAt":"2026-09-25T19:44:39.853Z"},{"id":"01a0da16-5d64-7248-8e57-33e17d489bc1","type":"component.created","target":{"type":"component","id":"RPSB8Dfaiy3oYIYoXRsc","preview":"Screen Stage","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da16-1aac-77be-aa24-c0d2e5c90023.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-25T19:41:33.924Z","latestAt":"2026-09-25T19:41:33.924Z"},{"id":"01a0da0a-c748-73df-acb8-fc2abcbd107c","type":"component.created","target":{"type":"component","id":"5svB7ri3vKTgjeSoMpMF","preview":"Agent Status","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da0a-6f9c-773e-9858-6a757d153dda.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-25T19:28:54.600Z","latestAt":"2026-09-25T19:28:54.600Z"},{"id":"01a07d1c-e3c2-76fc-936a-43d886304513","type":"component.created","target":{"type":"component","id":"JIypKRGsGxohE8oNHpmZ","preview":"CMS Tag Rail","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07d1c-4357-716e-ac04-f071a94e223d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T18:24:00.450Z","latestAt":"2026-09-07T18:24:00.450Z"},{"id":"01a0795d-a9d2-7539-87a8-e8f568d6808d","type":"component.created","target":{"type":"component","id":"14SAFf3E9lzu549dsh3L","preview":"CMS Splay Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0795d-4609-741f-ac0d-4459b410b23d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T00:56:16.594Z","latestAt":"2026-09-07T00:56:16.594Z"},{"id":"01a07828-5ae4-743d-925e-22008b081813","type":"component.created","target":{"type":"component","id":"mz5T5WIQHJR5wh6fdMQx","preview":"CMS Ribbon Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07827-c6ec-77c9-82a4-5bf74232d595.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T19:18:25.764Z","latestAt":"2026-09-06T19:18:25.764Z"},{"id":"01a0773f-c28b-71cc-b7ef-b1ac059988ed","type":"component.created","target":{"type":"component","id":"Rqst1m2zffJoNk7rujmK","preview":"Aisol Size Guide","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0773f-3ced-74c7-b13e-4f8e2dcd2247.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T15:04:22.411Z","latestAt":"2026-09-06T15:04:22.411Z"},{"id":"01a07691-816f-7398-afaa-404c078a7591","type":"component.created","target":{"type":"component","id":"TxEisRaeS1U5svh8Vro7","preview":"Aisol Spec Sheet","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07691-1002-76b0-ba6d-143d6e9a20ec.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T11:54:02.479Z","latestAt":"2026-09-06T11:54:02.479Z"},{"id":"01a07627-50b2-731c-b5d0-355da3afb2b2","type":"component.created","target":{"type":"component","id":"8Zu0R6saewfPeKEItMSC","preview":"Aisol Menu Board","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07626-3f8f-779d-b177-b36718647dcd.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T09:58:03.186Z","latestAt":"2026-09-06T09:58:03.186Z"}],"pagination":{"next":"MjAyNi0wOS0wNlQwOTo1ODowMy4xODZafDAxYTA3NjI3LTUwYjItNzMxYy1iNWQwLTM1NWRhM2FmYjJiMg","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:82d016d2-8113-4080-8f2a-7c3796dceab4:/unified/posts/?creator=82d016d2-8113-4080-8f2a-7c3796dceab4&with=reposts":[{"data":[{"id":"01a112e5-047e-73a8-ad40-f4fe3b500473","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zQXVj3DCpsFRWWBEqiNo","resolved":true,"title":"Aisol CMS Select","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol CMS Select is a native dropdown for Framer Forms whose options come from a Collection List, so new CMS items show up in the form without editing it."}]},{"type":"paragraph","content":[{"type":"text","text":"It can open with an option already chosen, from a URL like /apply?course=design-systems or from a Default you bind to a CMS field on a detail page."}]},{"type":"paragraph","content":[{"type":"text","text":"It only reads the list you drop in and never writes to it, and because it is a real select, keyboards, screen readers and phone pickers work as usual."}]},{"type":"paragraph","content":[{"type":"text","text":"- Each CMS item gives one option from its Option layer; an optional Value layer (e.g. the slug) is what the form sends."}]},{"type":"paragraph","content":[{"type":"text","text":"- Without a list, the Options you type in the panel are used, so it works the moment you drop it in."}]},{"type":"paragraph","content":[{"type":"text","text":"- Matches by label, value or slug, and a visitor's own choice is never overwritten."}]},{"type":"paragraph","content":[{"type":"text","text":"- It grew out of the Lyceum Academy template, where every course page opens the apply form with that course picked."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Options from a Collection List, or typed in, plus extra options at the end"}]},{"type":"paragraph","content":[{"type":"text","text":"• Option and Value layer names"}]},{"type":"paragraph","content":[{"type":"text","text":"• Default option and URL parameter for preselect"}]},{"type":"paragraph","content":[{"type":"text","text":"• Field name, placeholder, screen reader label, required"}]},{"type":"paragraph","content":[{"type":"text","text":"• Font, text size, height, radius and five colours"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: turn off the Collection List's pagination so every item is read; the open option list is the browser's own and cannot be styled; options from the CMS appear on the live site, the canvas shows the typed Options."}]}]},"introduction":"Form dropdown from your CMS, free","slug":"aisol-cms-select","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a112e4-88bf-75f9-838b-6624e2c8f6e6.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-06T20:26:00.548Z","updatedAt":"2026-10-06T20:35:47.406Z","publishedAt":"2026-10-06T20:26:00.545Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/AisolCmsSelect-Xl9bwe.js@464YscI6KuiRr52IKttF","previewUrl":"https://thistle-timing-694660.framer.app/cms-select","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"464YscI6KuiRr52IKttF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-06T20:26:01.214Z","updatedAt":"2026-10-06T20:26:01.214Z"},{"id":"01a112cb-4c4f-729c-aea2-1bd4823f3e50","title":null,"body":"

Small update to Lyceum Academy after a tip on Reddit. The Apply buttons used to hand the course to the form through sessionStorage, so it got lost on a refresh, in a new tab or in a shared link. Now they open /apply?course=<slug> and the course dropdown picks it up on load.

The nav's Apply button does the same when you're on a course page. New remixes get the change.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Small update to Lyceum Academy after a tip on Reddit. The Apply buttons used to hand the course to the form through sessionStorage, so it got lost on a refresh, in a new tab or in a shared link. Now they open /apply?course= and the course dropdown picks it up on load."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The nav's Apply button does the same when you're on a course page. New remixes get the change."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a112cb-0aad-774a-9fae-829129c4edee.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":2880,"height":1800}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-06T19:57:55.667Z","updatedAt":"2026-10-06T19:57:55.667Z"},{"id":"01a10d34-9081-7384-a7d4-70511ecd1861","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"74828","resolved":true,"title":"Lyceum Academy","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"For course creators, bootcamps and learning studios that run live cohorts."}]},{"type":"paragraph","content":[{"type":"text","text":"Lyceum Academy is a calm, editorial template for an online academy with several courses. Courses, instructors and journal posts all live in the CMS, so adding a new cohort is one new item: the course page, the schedule and the cards update with it."}]},{"type":"paragraph","content":[{"type":"text","text":"What's inside:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"16 page templates: Home, Courses, Course detail, Instructors, Instructor detail, Schedule, Pricing, Journal, Journal post, About, Contact, Apply, Thank you, Privacy, Terms and 404"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"5 CMS collections: Courses (curriculum, start date, schedule, price, instructor), Instructors, Journal, Weekly Sessions and Plan Comparison, so even the timetable and the pricing table are edited as CMS items"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Working forms: Contact, Apply and a newsletter sign-up, all leading to a thank-you page. The Apply course list comes straight from the CMS, and every Apply button on a course page opens the form with that course already selected"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shared color and text styles, plus reusable Navigation, Button, Plan Card, CTA Banner, Course Card, Instructor Card and FAQ components: change a price or a call to action once and every page follows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop, tablet and phone layouts on every page"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built to be edited: change the colors or fonts once in the styles and the whole site follows."}]},{"type":"paragraph","content":[{"type":"text","text":"Support: u6219804@gmail.com. Refunds: this is a digital product delivered instantly, so purchases are non-refundable once delivered. If the template doesn't work as described, email us within 7 days and we'll fix it or refund you in full."}]}]},"introduction":"Online academy & course template","slug":"lyceum-academy","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a10d30-efb6-7031-bb43-70df6fde8ade.jpg","metadata":{"tint":{"h":180,"s":57,"l":22},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a10d30-f047-750e-81a9-8f8633532c19.jpg","metadata":{"tint":{"h":180,"s":57,"l":22},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a10d30-efb7-72ef-aa08-12e82ef743fb.jpg","metadata":{"tint":{"h":180,"s":57,"l":22},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a10d30-efa7-7636-8529-b9087fb126cb.jpg","metadata":{"tint":{"h":180,"s":57,"l":22},"width":1600,"height":1200}},{"type":"video","url":"https://stream.mux.com/102oPpYy01SAOtkkq00PnUJBR022UdWmx5q71PYzn1I2TdA.m3u8","metadata":{"posterUrl":"https://image.mux.com/102oPpYy01SAOtkkq00PnUJBR022UdWmx5q71PYzn1I2TdA/thumbnail.webp?time=2.32","aspectRatio":"16:9","duration":33.44}}],"post":null,"createdAt":"2026-10-05T17:55:10.393Z","updatedAt":"2026-10-05T17:55:10.393Z","publishedAt":"2026-10-05T17:55:10.390Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"59","paymentUrl":"https://payhip.com/b/54nIA","remixUrl":null,"previewUrl":"https://prosperous-variations-533083.framer.app/","categories":[],"styles":[{"id":247,"name":"Professional","slug":"professional"},{"id":236,"name":"Light","slug":"light"},{"id":111,"name":"Minimal","slug":"minimal"}],"mainCategory":{"id":114,"name":"Education","slug":"education"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T17:55:11.105Z","updatedAt":"2026-10-05T17:55:11.105Z"},{"id":"01a0eef3-d585-77bd-be05-21499e4db2a2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"T44ULfh9I3pDhZAg4kyP","resolved":true,"title":"Aisol Silk Banner","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Silk Banner is one continuous strip of cloth that flows across the page with your words and small images printed on it."}]},{"type":"paragraph","content":[{"type":"text","text":"Waves travel along the strip, and the cloth bulges where the pointer passes, then springs back."}]},{"type":"paragraph","content":[{"type":"text","text":"A pause button is shown by default, it stops drawing off screen and in hidden tabs, and it starts paused for visitors who prefer reduced motion."}]},{"type":"paragraph","content":[{"type":"text","text":"- Built-in words and image tiles fill the strip until you add your own."}]},{"type":"paragraph","content":[{"type":"text","text":"- It never captures scrolling: wheels and swipes keep moving the page."}]},{"type":"paragraph","content":[{"type":"text","text":"- The printed words are also listed once for screen readers."}]},{"type":"paragraph","content":[{"type":"text","text":"- Need drag, snapping and captions? The paid sibling is Aisol Silk Carousel."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items (up to 24): words or images"}]},{"type":"paragraph","content":[{"type":"text","text":"• Cloth: colour, height, wave size and count, sheen"}]},{"type":"paragraph","content":[{"type":"text","text":"• Motion: speed, direction, slow down on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"• Touch: how far the cloth bulges under the pointer"}]},{"type":"paragraph","content":[{"type":"text","text":"• Text: size, serif or sans, colour, separator"}]},{"type":"paragraph","content":[{"type":"text","text":"• Pause button, background, accessible label and an optional link"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: items are entered in the property panel (no CMS binding); while it is visible and playing it keeps drawing, like any marquee; the cloth needs WebGL, and without it a plain CSS marquee is shown."}]}]},"introduction":"Flowing cloth banner, free","slug":"aisol-silk-banner","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0eef3-b1cf-778b-8111-16c4801ecd0c.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T20:55:51.831Z","updatedAt":"2026-10-03T00:40:36.673Z","publishedAt":"2026-09-29T20:55:51.827Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/AisolSilkBanner-NNbrOA.js@WZfh0JvSMDg4rMySkBEm","previewUrl":"https://thistle-timing-694660.framer.app/silk-banner","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"WZfh0JvSMDg4rMySkBEm","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T20:55:52.453Z","updatedAt":"2026-09-29T20:55:52.453Z"},{"id":"01a0ee54-ab42-72ce-86a1-d7549627b893","title":null,"body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Build note: making a carousel bend like cloth, and stop when it's still."}]},{"type":"paragraph","content":[{"type":"text","text":"The idea was simple: the faster you drag, the more the panels curve. Getting there took three tries."}]},{"type":"paragraph","content":[{"type":"text","text":"• Measuring speed. My first version read speed from frame to frame, so a slow laptop and a fast one bent differently. It now uses the pointer samples from the last 100 ms, so the same drag gives the same bend on any screen."}]},{"type":"paragraph","content":[{"type":"text","text":"• Settling. The bend runs on a damped spring. It overshoots once or twice and then snaps exactly flat, so the resting frame matches the page before any WebGL loads."}]},{"type":"paragraph","content":[{"type":"text","text":"• Stopping. An idle \"breeze\" looked nice but kept the GPU busy the whole time the page was open. I turned it off by default and checked the published page: while nothing moves, the component draws zero frames. It also stops off screen and in hidden tabs."}]},{"type":"paragraph","content":[{"type":"text","text":"One Framer surprise: after I changed a control's default in code, the published page kept the old value that was saved on the instance. Re-saving the instance fixed it. Worth knowing if you ship code components."}]},{"type":"paragraph","content":[{"type":"text","text":"The clip is recorded from Aisol Silk Carousel."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/00JNfnsRfw7qO3Bla7fXr00vghpTlEKhoPMgkM5o4naAU.m3u8","metadata":{"posterUrl":"https://image.mux.com/00JNfnsRfw7qO3Bla7fXr00vghpTlEKhoPMgkM5o4naAU/thumbnail.webp?time=13.8","aspectRatio":"16:9","duration":20.066667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T18:02:01.413Z","updatedAt":"2026-09-29T18:02:01.413Z"},{"id":"01a0edbb-fadf-7496-910f-2d3219ea8097","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"t4iePbhU5RUOQFas5pYw","resolved":true,"title":"Aisol Silk Carousel","body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Silk Carousel is an endless row of image and video panels that bend like fabric while you drag them: the leading edge lags and the trailing edge follows."}]},{"type":"paragraph","content":[{"type":"text","text":"Let go and the row glides, snaps to the nearest slide and the panels settle flat; an optional breeze adds a slight sway while the row is still."}]},{"type":"paragraph","content":[{"type":"text","text":"It works with mouse, touch, trackpad and keyboard, pauses when off screen, and turns the bending off for visitors who prefer reduced motion."}]},{"type":"paragraph","content":[{"type":"text","text":"- Eight built-in editorial posters fill the slides until you add your own images."}]},{"type":"paragraph","content":[{"type":"text","text":"- Horizontal swipes move the row while vertical swipes still scroll the page; a sideways trackpad swipe moves it, a plain wheel does not."}]},{"type":"paragraph","content":[{"type":"text","text":"- Arrow, Home and End keys move between slides, and the current slide is announced as “n of N”."}]},{"type":"paragraph","content":[{"type":"text","text":"- Videos play muted only near the active slide and fall back to their poster if autoplay is blocked."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Slides (up to 30): image, optional video, title, meta, link and link label"}]},{"type":"paragraph","content":[{"type":"text","text":"• Layout: panel width, aspect ratio, gap, corner radius"}]},{"type":"paragraph","content":[{"type":"text","text":"• Silk: bend, ripple, settle speed, breeze"}]},{"type":"paragraph","content":[{"type":"text","text":"• Motion: drag, snap, autoplay and interval"}]},{"type":"paragraph","content":[{"type":"text","text":"• Captions: show, below or overlay, text size, colour"}]},{"type":"paragraph","content":[{"type":"text","text":"• Controls: arrows, dots or progress line"}]},{"type":"paragraph","content":[{"type":"text","text":"• Theme: transparent or background colour, accent, accessible label"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: slides are entered in the property panel (no CMS binding); captions use a system font stack rather than your site font; images must allow cross-origin use to bend (Framer uploads do), otherwise that slide shows flat; bending and video need WebGL, and without it the carousel falls back to a plain scroll-snap row; videos are muted."}]},{"type":"paragraph","content":[{"type":"text","text":"For a flowing cloth banner with a pause button, see the free sibling Aisol Silk Banner."}]}]},"introduction":"Carousel that ripples like silk","slug":"aisol-silk-carousel","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0edbb-d4b3-76c8-9eb8-628e9591374d.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T15:15:14.126Z","updatedAt":"2026-10-03T14:04:07.899Z","publishedAt":"2026-09-29T15:15:14.123Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/silk-carousel","price":"15","paymentUrl":"https://payhip.com/b/2uR8r","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"3akiJCTGcr2NRouwgqFV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T15:15:14.783Z","updatedAt":"2026-09-29T15:15:14.783Z"},{"id":"01a0e8a8-2bf8-74d8-a324-9d400bed21c9","title":null,"body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Build note: a world map with no tile server."}]},{"type":"paragraph","content":[{"type":"text","text":"Most map components load tiles from Google, OpenStreetMap or Carto, so every visit sends a request to a third party and many need an API key. For our last two components I tried the opposite and baked the world into the code: Natural Earth coastlines (public domain), projected to Equal Earth and simplified into a single 25 KB SVG path. The land dots are an SVG pattern whose spacing is recalculated on zoom, so they keep the same size on screen."}]},{"type":"paragraph","content":[{"type":"text","text":"Three things that took more than one try:"}]},{"type":"paragraph","content":[{"type":"text","text":"Scrolling. A plain wheel now scrolls the page and only Ctrl or ⌘ zooms the map. On phones one finger scrolls the page and two fingers move the map. We measured both on the published site."}]},{"type":"paragraph","content":[{"type":"text","text":"The first view. Measuring the frame in JavaScript to fit all pins would make the server and browser draw different frames, so the fit is done with CSS container units. On a 390 px phone the first version cut off Japan and Australia; this fixed it."}]},{"type":"paragraph","content":[{"type":"text","text":"Text sizes. The panel started with eleven unrelated font sizes. It now uses one scale (14 px base, ratio 1.125) tied to a single Text Size control."}]},{"type":"paragraph","content":[{"type":"text","text":"The two are Aisol Office Map and Aisol Dot Globe; the clip is recorded from them."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/sPT1MnndFsMdLSPYWXgEYnsCJXA5JMf8M8nz02FiPqDg.m3u8","metadata":{"posterUrl":"https://image.mux.com/sPT1MnndFsMdLSPYWXgEYnsCJXA5JMf8M8nz02FiPqDg/thumbnail.webp?time=23","aspectRatio":"16:9","duration":33.066667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T15:35:30.556Z","updatedAt":"2026-09-28T15:35:30.556Z"},{"id":"01a0e7d5-dd9a-731d-b206-3ca2ef4faa43","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"jDUglx6nTfkwbR8Es9q4","resolved":true,"title":"Aisol Office Map","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Office Map shows your offices, studios or stores on a dotted or solid world map drawn inside the component, next to a list with search and region filters. It loads no tiles and needs no API key. On narrow frames the list becomes a bottom sheet."}]},{"type":"paragraph","content":[{"type":"text","text":"Choosing a place moves the map to it and opens a card with its photo, address, hours and a link or directions button. Nearby pins merge into a count until you zoom in."}]},{"type":"paragraph","content":[{"type":"text","text":"- Search ignores accents and case (\"sao\" finds São Paulo)."}]},{"type":"paragraph","content":[{"type":"text","text":"- A plain wheel scrolls the page; Ctrl or ⌘ plus wheel zooms. On touch, two fingers move the map."}]},{"type":"paragraph","content":[{"type":"text","text":"- Each office in the list is a button: arrows move, Enter opens a card, Esc closes it. With the list off, Tab reaches the map pins instead."}]},{"type":"paragraph","content":[{"type":"text","text":"- Fly Time sets how long the move takes, with Drag on or off. Reduced motion jumps instantly."}]},{"type":"paragraph","content":[{"type":"text","text":"- Animation stops when the map is off screen or the tab is hidden."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Locations (up to 60): name, city, country, region, latitude, longitude, address, hours, button label, link, photo"}]},{"type":"paragraph","content":[{"type":"text","text":"• Map: dots or solid, colours, dot grid and size"}]},{"type":"paragraph","content":[{"type":"text","text":"• Pins: colour, size, pulse, labels"}]},{"type":"paragraph","content":[{"type":"text","text":"• Panel: title, search, region filters"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card: photo, directions, new tab"}]},{"type":"paragraph","content":[{"type":"text","text":"• Interaction: open first card, drag, zoom buttons, fly time, focus zoom"}]},{"type":"paragraph","content":[{"type":"text","text":"• Theme: font, text size, colours, radius, label"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: city-level map with no streets or place names; Antarctica is not shown. Locations are typed as latitude and longitude, with no CMS binding or address lookup."}]}]},"introduction":"Office locator map with no API key","slug":"aisol-office-map","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e7d5-9d3f-7474-a19c-941bbe1f3198.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T11:45:47.348Z","updatedAt":"2026-10-03T14:01:27.590Z","publishedAt":"2026-09-28T11:45:47.337Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/office-map","price":"15","paymentUrl":"https://payhip.com/b/i1KCm","workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"1dRFSHKQagfckUcxde5R","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T11:45:47.930Z","updatedAt":"2026-09-28T11:45:47.930Z"},{"id":"01a0e7c5-a98d-74f8-8a6a-1c5f64049e1b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"jc1u9OiVnVkL0QlNh7Kh","resolved":true,"title":"Aisol Dot Globe","body":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Dot Globe draws the world as a dotted 3D globe in three.js, with your cities as pins and labels that hide when they turn to the far side."}]},{"type":"paragraph","content":[{"type":"text","text":"Visitors can drag the globe to spin it and it keeps turning briefly after release; at rest it rotates slowly, and animated arcs can connect your cities in a chain or from one hub."}]},{"type":"paragraph","content":[{"type":"text","text":"The land shape is stored inside the component, so it loads no map tiles or other files and needs no API key; the Framer canvas and browsers without WebGL show a flat drawing of the same globe."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Coastlines come from Natural Earth map data (public domain), sampled into dots you can make denser, larger or recoloured."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Once it has focus, arrow keys turn and tilt the globe and Home resets it; a vertical swipe on touch screens still scrolls the page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drawing stops when the globe is off screen or has nothing to animate; reduced motion turns off auto-rotate, arcs and pulses but keeps dragging."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Label outlines switch between dark and light so labels stay legible on either background."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pins: label, latitude and longitude for each city"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Markers: colour, size, pulse, labels and label colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Globe: size, dot colour, dot size, density, ocean colour and opacity, glow colour and strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arcs: Off, Chain or Hub, colour and speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion: auto-rotate and its speed, drag, starting longitude and tilt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background: transparent or a colour, and an accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"For a searchable locations list on a flat map, see the paid sibling "},{"type":"text","text":"Aisol Office Map","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://hy.chujiqiqi.com/marketplace/components/aisol-office-map/","target":"_blank"}}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: pins are placed by latitude and longitude (no address lookup or CMS binding), very small islands can drop out at this map resolution, labels use the system sans-serif rather than your site font, and without WebGL2 the flat drawing is shown and cannot be dragged."}]}]},"introduction":"Dotted 3D globe with pins and arcs","slug":"aisol-dot-globe","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e7c5-4a14-765f-bf52-0f25042a5700.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T11:28:05.457Z","updatedAt":"2026-09-28T15:27:46.394Z","publishedAt":"2026-09-28T11:28:05.455Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/AisolDotGlobe-H7p0ip.js@wBW3SS2w70bMrirlfjgb","previewUrl":"https://thistle-timing-694660.framer.app/dot-globe","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"wBW3SS2w70bMrirlfjgb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T11:28:06.029Z","updatedAt":"2026-09-28T11:28:06.029Z"},{"id":"01a0e48d-b33f-759d-aa53-f104efb57c43","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tf9fFYjORHONTUGKJuP9","resolved":true,"title":"Lanyard Badge","body":"$5a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A name badge hanging from a lanyard, rendered in three.js. Visitors can grab it, swing it and throw it; flicking an edge turns it over to the back."}]},{"type":"paragraph","content":[{"type":"text","text":"Card faces"}]},{"type":"paragraph","content":[{"type":"text","text":"- Front image and Back image are always in the panel, so you can connect them to CMS image fields. When an image is set, it covers that face. When it is empty (or cannot be loaded), the face is drawn from your fields instead."}]},{"type":"paragraph","content":[{"type":"text","text":"- The drawn front uses Name, Role, Organisation, Event, Tag and an optional round Photo (initials without a photo). The drawn back uses Organisation, Event and Tag."}]},{"type":"paragraph","content":[{"type":"text","text":"- Portrait, landscape or square card in Gloss, Matte or Holographic."}]},{"type":"paragraph","content":[{"type":"text","text":"- The strap takes your colour, width, length and printed text."}]},{"type":"paragraph","content":[{"type":"text","text":"Motion"}]},{"type":"paragraph","content":[{"type":"text","text":"- Drops in when it first scrolls into view and sways gently at rest."}]},{"type":"paragraph","content":[{"type":"text","text":"- Only a press on the badge grabs it, so page scrolling keeps working."}]},{"type":"paragraph","content":[{"type":"text","text":"- Arrow keys push and flip the badge once it has focus. With a link set, a click (not a drag) or Enter opens it."}]},{"type":"paragraph","content":[{"type":"text","text":"- Reduced motion turns off drop-in and sway but keeps dragging."}]},{"type":"paragraph","content":[{"type":"text","text":"- The animation stops while the badge is off screen or the tab is hidden, and sleeps once the badge has settled."}]},{"type":"paragraph","content":[{"type":"text","text":"Fallbacks"}]},{"type":"paragraph","content":[{"type":"text","text":"- Shows a flat badge on the Framer canvas and where WebGL is unavailable, using your front image when one is set."}]},{"type":"paragraph","content":[{"type":"text","text":"Notes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Images must allow cross-origin loading to appear on the 3D card."}]},{"type":"paragraph","content":[{"type":"text","text":"- Upgrading from v1: the Card (Template / Images) switch is gone. A set Front or Back image now always shows; clear it to go back to the drawn face."}]}]},"introduction":"Grab-and-throw name badge in 3D","slug":"lanyard-badge","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4ad-e014-754c-ab0e-d69fc9e98146.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T20:28:06.198Z","updatedAt":"2026-09-30T21:09:52.147Z","publishedAt":"2026-09-27T20:28:06.195Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/lanyard-badge","price":"12","paymentUrl":"https://payhip.com/b/uJmdc","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"TNAADXy9jlV2TxgQrCRo","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-27T20:28:06.847Z","updatedAt":"2026-09-27T20:28:06.847Z"},{"id":"01a0e46d-1b57-71e3-ad2a-d401061c60bc","title":null,"body":"

Two three.js components, recorded frame by frame from the real thing.

Paper Flipbook: drop in page images, drag the corner or use the arrow keys. One thing I learned shipping it: on my published site, React's onKeyDown never fired inside the code component, even though it worked on the canvas. It now listens on its own root element. If your component's keyboard works in the editor but not live, that's worth checking.

Logo Extrude 3D: paste an SVG and it rebuilds as you type. The clip runs a bolt through chrome, glass, clay, gold and holographic, then pushes the depth.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Two three.js components, recorded frame by frame from the real thing."}]},{"type":"paragraph","content":[{"type":"text","text":"Paper Flipbook: drop in page images, drag the corner or use the arrow keys. One thing I learned shipping it: on my published site, React's onKeyDown never fired inside the code component, even though it worked on the canvas. It now listens on its own root element. If your component's keyboard works in the editor but not live, that's worth checking."}]},{"type":"paragraph","content":[{"type":"text","text":"Logo Extrude 3D: paste an SVG and it rebuilds as you type. The clip runs a bolt through chrome, glass, clay, gold and holographic, then pushes the depth."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/cclJiUz02tqjHSmHRyiApE4tgxMzlnXrYb02TjYAoXdFw.m3u8","metadata":{"posterUrl":"https://image.mux.com/cclJiUz02tqjHSmHRyiApE4tgxMzlnXrYb02TjYAoXdFw/thumbnail.webp?time=31.833","aspectRatio":"16:9","duration":34.166667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-27T19:52:30.810Z","updatedAt":"2026-09-27T19:52:30.810Z"},{"id":"01a0e3f4-3894-7636-b016-e1db7ad8147e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qath1iMa4RaxyJ44N9DV","resolved":true,"title":"Logo Extrude 3D","body":"$5b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo Extrude 3D turns an SVG logo into a bevelled 3D object: upload an SVG file or paste its code, and its filled shapes, holes included, are extruded, centred and fitted to the frame."}]},{"type":"paragraph","content":[{"type":"text","text":"Pick Chrome, Glass, Clay, Gold or Holographic, or your own colour, roughness and metalness; reflections are built in code, so no image files are downloaded."}]},{"type":"paragraph","content":[{"type":"text","text":"It turns around Y or X or with a wobble, can be dragged with inertia or turned by page scroll, draws nothing while still or off screen, and shows a flat logo on the canvas and where WebGL is unavailable."}]},{"type":"paragraph","content":[{"type":"text","text":"Depth and bevel scale with the logo, so they look the same at any SVG size."}]},{"type":"paragraph","content":[{"type":"text","text":"Reads paths (arcs included), rects, circles, ellipses, polygons and polylines, with group transforms and both fill rules."}]},{"type":"paragraph","content":[{"type":"text","text":"Under reduced motion, auto-rotate and scroll turning are off; dragging still works."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"SVG file or SVG code; depth (1–80 %), bevel (0–8 %), bevel steps (1–10)"}]},{"type":"paragraph","content":[{"type":"text","text":"Material preset or Custom (colour, roughness, metalness); light (0–3)"}]},{"type":"paragraph","content":[{"type":"text","text":"Auto rotate with speed (0–180 °/s) and axis (Y, X, Wobble); drag; scroll turn with scroll angle (10–720 °)"}]},{"type":"paragraph","content":[{"type":"text","text":"Transparent or background colour, padding (0–200 px), scale (10–400 %), accessible label"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: only filled shapes are extruded (no strokes, text, gradients or images), shapes painted over others, such as white knock-outs, become solid, the whole logo uses one material, and an SVG file is only read when it is uploaded to Framer (other hosts are ignored; paste the SVG code instead)."}]}]},"introduction":"Your SVG logo, extruded in 3D","slug":"logo-extrude-3d","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b2-57e1-7331-8e62-c74574f3a14d.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T17:40:27.771Z","updatedAt":"2026-10-03T08:20:29.912Z","publishedAt":"2026-09-27T17:40:27.767Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/logo-extrude-3d","price":"12","paymentUrl":"https://payhip.com/b/80N6f","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"e8gAQMmJFs3VcKlHLgsw","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-27T17:40:28.436Z","updatedAt":"2026-09-27T17:40:28.436Z"},{"id":"01a0e3ed-f32b-76de-8248-77a623024e98","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"P35Da7UzweXpZhKbVZXO","resolved":true,"title":"Paper Flipbook","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Paper Flipbook turns your images into a book you page through: each page bends as it turns, with shading along the fold, a soft spine shadow and a shadow cast on the page underneath."}]},{"type":"paragraph","content":[{"type":"text","text":"Turn pages by dragging a page, clicking or tapping either half, using the arrow buttons, or with the keyboard once the book has focus; add one image per page, cover first, or leave the list empty to show twelve built-in demo pages."}]},{"type":"paragraph","content":[{"type":"text","text":"It draws frames only while a page is moving and stops when scrolled off screen; the Framer canvas and browsers without WebGL show the same spread as a static layout, reduced motion changes pages instantly, and a polite live region announces the pages in view."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A dragged page stays under your pointer and, on release, completes the turn or falls back depending on how far and how fast you moved it; with a mouse, hovering near the outer edge lifts the page slightly."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard: Left/Right arrows and Page Up/Page Down turn pages, Home goes to the cover and End to the last page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hard cover keeps the front cover rigid (and the back cover when the page count is even); a closed cover sits centred."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional autoplay turns a page every few seconds, reverses at either end, and pauses on hover, on focus and while off screen."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pages (one image each, up to 200, cover first), page ratio (3:4, 2:3, 4:5, A4, 1:1, 4:3, 3:2), start page, hard cover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curl, paper thickness and shadow strength (0–1 each)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background and accent colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay and interval (1–30 s), arrow buttons, page number counter, drag to turn, accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: it always shows a two-page spread (no single-page mode at narrow widths), pages are images only, and image hosts must allow cross-origin loading for the 3D pages (images uploaded to Framer do)."}]}]},"introduction":"Page-turning book with real curl","slug":"paper-flipbook","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b0-6794-75b9-8311-887e6aaba9c6.png","metadata":{"tint":{"h":60,"s":26,"l":47},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T17:33:36.801Z","updatedAt":"2026-10-03T00:39:31.903Z","publishedAt":"2026-09-27T17:33:36.798Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/paper-flipbook","price":"14","paymentUrl":"https://payhip.com/b/cQIOq","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"x2e6ggWA2rlfLDmRtrhs","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-27T17:33:37.451Z","updatedAt":"2026-09-27T17:33:37.451Z"},{"id":"01a0dc96-e61d-726e-874e-d60e2e763fd7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CqPILX4j2Rry9VMWvn0Q","resolved":true,"title":"Phone Flow","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Phone Flow walks through your app screens inside a phone frame: on each screen a tap ring pulses at the point you set, then the next screen slides, fades or pushes in."}]},{"type":"paragraph","content":[{"type":"text","text":"Each screen is a component instance from your project with its own tap position and hold time, and screens without one show a built-in grey wireframe layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Autoplay starts once it is in view and pauses on hover, off screen or with the pause button, and the Framer canvas and reduced motion start on the last screen with no animation."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide, fade or push transitions, looping in both directions or stopping at the last screen."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Previous, pause and next buttons, progress dots, and arrow keys and Space when the frame has focus."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame colour, frame thickness, screen radius, tap colour and tap size are all adjustable."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Screens (component instance, label, tap X %, tap Y %, hold time 200–6000 ms)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transition (slide, fade, push), autoplay, loop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress dots and previous, next and pause buttons on or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tap colour and size (10–80 px), frame colour, frame thickness (2–36 px), screen radius (4–48 px)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: the taps are an animation, not real input into your screens."}]}]},"introduction":"App tap-through in a phone frame","slug":"phone-flow","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0dc96-8200-73a9-bcdf-502c69addf9f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-26T07:21:11.338Z","updatedAt":"2026-10-03T00:39:11.327Z","publishedAt":"2026-09-26T07:21:11.335Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/phone-flow","price":"14","paymentUrl":"https://payhip.com/b/AMWqj","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"H2tDUwZqsAHrJGeWtst2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-26T07:21:11.965Z","updatedAt":"2026-09-26T07:21:11.965Z"},{"id":"01a0dc93-2e6a-732c-8614-357c27ab08af","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bhqxfsDuXSWDP14vba3d","resolved":true,"title":"Agent Chat","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Agent Chat plays a scripted conversation: each user message is typed into the input bar and sent, then the assistant pauses, can show a tool step, and replies word by word."}]},{"type":"paragraph","content":[{"type":"text","text":"You write the messages and set typing speed, pause, colours, font, radius and height; it starts when it scrolls into view or on page load, and loops by default."}]},{"type":"paragraph","content":[{"type":"text","text":"The Framer canvas and reduced motion show the whole conversation at once with no timers, screen readers can read the finished messages, and the final reply is announced through a polite live region."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Messages are a list of user and assistant turns; while the assistant thinks, three dots bounce, and a turn with a Tool label shows a spinner chip that turns into a check."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"User text types in character by character with a blinking caret; assistant replies appear one word at a time."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The transcript scrolls itself to the newest message, and a restart button appears in the header when a non-looping chat ends."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Messages (role, text, optional tool label), header title and subtitle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typing speed (4–120 characters per second), pause before each reply (120–4000 ms), loop, start (in view or on load)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background, surface, user bubble, user text, reply text, accent and border colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font, corner radius (0–40 px), height (260–900 px)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: it replays the messages you write; visitors cannot type into it, and it does not connect to any AI service."}]}]},"introduction":"Scripted AI chat that plays itself","slug":"agent-chat","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0dc91-da1f-71ed-b935-0c086ca39e1e.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-26T07:17:07.691Z","updatedAt":"2026-10-03T00:38:50.090Z","publishedAt":"2026-09-26T07:17:07.688Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/agent-chat","price":"14","paymentUrl":"https://payhip.com/b/x6qaC","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"r4tbNyGltmAkpKFQbE3k","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-26T07:17:08.330Z","updatedAt":"2026-09-26T07:17:08.330Z"},{"id":"01a0da2e-dd80-735b-88fb-81990b18bd8d","title":null,"body":"

Wanted a footer that reacts when you wave the cursor at it. The first pass pushed letters sideways into each other and it just looked broken, so they move up and down now.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Wanted a footer that reacts when you wave the cursor at it. The first pass pushed letters sideways into each other and it just looked broken, so they move up and down now."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da2e-a4b9-77ef-a37c-fba5105a1e9f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-25T20:08:19.588Z","updatedAt":"2026-09-25T20:08:19.588Z"},{"id":"01a0da2e-52c4-75f0-b216-bc717daf381d","title":null,"body":"

Made a scripted "AI is working" card because faking it with a GIF never matched the page. The fiddly part was keeping the card from growing while the answer streams in.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made a scripted \"AI is working\" card because faking it with a GIF never matched the page. The fiddly part was keeping the card from growing while the answer streams in."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da2e-116a-77d5-a6f4-b7c38e669821.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-25T20:07:44.072Z","updatedAt":"2026-09-25T20:07:44.072Z"},{"id":"01a0da2d-a5ec-71a9-b31f-9461352b2227","title":null,"body":"

Wanted a device mockup where the laptop and the phone in front of it always show the same screen. The tablet-plus-phone layout fought me longest: the phone kept sitting beside the tablet instead of overlapping it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Wanted a device mockup where the laptop and the phone in front of it always show the same screen. The tablet-plus-phone layout fought me longest: the phone kept sitting beside the tablet instead of overlapping it."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da2d-762f-725a-943c-f92f1fc33c39.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-25T20:06:59.824Z","updatedAt":"2026-09-25T20:06:59.824Z"},{"id":"01a0da19-2efb-766f-aee0-f2f6450117c6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"V2GLXk8RU5tID2MeOwWR","resolved":true,"title":"Footer Field","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Footer Field is a complete site footer with a giant wordmark that rises into place the first time it is seen, then reacts to the pointer: letters are pushed away by the cursor and spring back. On touch screens a tap sends a ripple through the letters."}]},{"type":"paragraph","content":[{"type":"text","text":"What you get:"}]},{"type":"paragraph","content":[{"type":"text","text":"- Up to five link columns. Add links as rows with a page picker (Footer links: column, label, link). The older one-link-per-line text field still works as a fallback."}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional logo image with its own link, and Social links rows with a page picker in the bottom bar."}]},{"type":"paragraph","content":[{"type":"text","text":"- Copyright line and a Back to top link to any section."}]},{"type":"paragraph","content":[{"type":"text","text":"- Columns wrap from up to five to two and then one by the footer's own width, not the window. Below 600px the padding halves and the bottom bar stacks."}]},{"type":"paragraph","content":[{"type":"text","text":"- Three theme presets (Ink, Paper, Signal) or six custom colours. Fonts, text size, wordmark weight, fit-to-width or fixed size, left or centre alignment and heading level."}]},{"type":"paragraph","content":[{"type":"text","text":"Accessibility and performance:"}]},{"type":"paragraph","content":[{"type":"text","text":"- Real footer landmark, one navigation region per column named by its title, and a named social links region."}]},{"type":"paragraph","content":[{"type":"text","text":"- Every link is a real anchor with a visible name; external links open in a new tab and say so to screen readers. Unsafe link schemes are shown as plain text."}]},{"type":"paragraph","content":[{"type":"text","text":"- Keyboard focus ring on every link. Reduced motion shows a still wordmark."}]},{"type":"paragraph","content":[{"type":"text","text":"- Animation runs only while letters move and stops at rest. No window or document listeners; only nodes inside the component are touched."}]},{"type":"paragraph","content":[{"type":"text","text":"- Still wordmark on the Framer canvas."}]}]},"introduction":"Footer with a living wordmark","slug":"footer-field","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0df91-476a-74fe-a686-18bc7575ee39.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T19:44:37.999Z","updatedAt":"2026-09-30T21:48:19.402Z","publishedAt":"2026-09-25T19:44:37.996Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/FooterField-A8JEEI.js@TwWAAQkJcF1JpASU4Lxe","previewUrl":"https://thistle-timing-694660.framer.app/footer-field","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"TwWAAQkJcF1JpASU4Lxe","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-25T19:44:38.651Z","updatedAt":"2026-09-25T19:44:38.651Z"},{"id":"01a0da16-5b1f-7766-b56c-73089131131c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"RPSB8Dfaiy3oYIYoXRsc","resolved":true,"title":"Screen Stage","body":"$60","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Use it with CMS in three steps: 1. Drop a Collection List into Screens (CMS) and turn off its Pagination. 2. In the item, add an image or video layer named Media, plus text layers named Title and Caption. 3. Every item becomes one screen on the stage; the caption shows its Title, Caption and the item's link, and the dots follow the item count."}]},{"type":"paragraph","content":[{"type":"text","text":"Screens (CMS) reads each item and draws it on the device screens itself, so your list stays untouched. The list is hidden after reading, so a Load more button is not shown."}]},{"type":"paragraph","content":[{"type":"text","text":"Your product screens in generic laptop, tablet and phone frames; every device shows the same screen."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features"}]},{"type":"paragraph","content":[{"type":"text","text":"- The Media layer fills the screen. Turn Fill With Media off for Whole item: a copy of the CMS item is shown as you designed it (static, no hover or interactions)."}]},{"type":"paragraph","content":[{"type":"text","text":"- Videos from the Media layer play muted, only on the active screen and only while the stage is on screen."}]},{"type":"paragraph","content":[{"type":"text","text":"- Autoplay with a pause button; it pauses on hover and focus."}]},{"type":"paragraph","content":[{"type":"text","text":"- Previous, next and one dot per screen, plus arrow keys, Home and End."}]},{"type":"paragraph","content":[{"type":"text","text":"- Reduced motion respected."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"- Screens (CMS) slot, layer names for Title, Caption and Media, or hand-made Items"}]},{"type":"paragraph","content":[{"type":"text","text":"- Devices: laptop, tablet, phone or a pair; fit cover or contain"}]},{"type":"paragraph","content":[{"type":"text","text":"- Autoplay, interval, fade or slide, and Duration for every transition"}]},{"type":"paragraph","content":[{"type":"text","text":"- Caption, controls, heading level, colours, font, size and labels"}]},{"type":"paragraph","content":[{"type":"text","text":"The canvas shows the Collection List as you built it; the stage runs in Preview and on the published site."}]}]},"introduction":"Your screens in synced devices","slug":"screen-stage","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da16-1aac-77be-aa24-c0d2e5c90023.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T19:41:32.686Z","updatedAt":"2026-10-02T10:58:17.819Z","publishedAt":"2026-09-25T19:41:32.683Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/screen-stage","price":"14","paymentUrl":"https://payhip.com/b/Gbtyp","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"ywcRr5q3fLxQ1s9rCaD4","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-25T19:41:33.343Z","updatedAt":"2026-09-25T19:41:33.343Z"}],"pagination":{"next":"MDFhMGRhMTYtNWIxZi03NzY2LWI1NmMtNzMwODkxMzExMzFj","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L61"}]