5f:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 60:Ta72,

AK Team Member Cards is a fully interactive Framer component designed to showcase your team in a visually engaging stacked card layout. Each card fans out smoothly on hover using a spring animation, revealing all team members symmetrically distributed left and right around the featured card. Clicking any background card brings it to the front as the new featured hero.

Card Design

Each card contains a photo upload slot (via Framer's native image picker), a fallback illustrated avatar (5 styles to choose from), role label, name, bio, and a CTA pill button in the top-right corner of the image area. The pill starts as a small circle showing only an arrow icon, then expands to reveal the label text the moment the card is hovered — not just when hovering the pill itself.

Featured Card

One card is designated as the hero — it renders with a dark background, elevated shadow, and light text. All other cards use a light background with dark text. Both the featured and regular card styles have fully independent color controls.

Typography Controls

Name, Role, and Bio each have their own independent font controls using Framer's native ControlType.Font picker — the same font panel you get in the Text layer — plus separate size (with stepper) and color pickers for the featured card and regular cards independently.

Color Controls

Full color control over: featured card background, featured image background, regular card background, regular card image background, pill button color on featured cards, and pill button color on regular cards.

Responsive Behavior

The component detects the frame width and switches layouts automatically across three breakpoints — on desktop and tablet it renders the interactive fan stack with hover expand, on mobile (≤ 600px) it switches to a clean vertical list where each card stretches full width with the photo on the left and text on the right, with the featured card always appearing first.

Direction Support

Full LTR and RTL support — the fan spread direction, pill alignment, and mobile layout all flip correctly based on a single Direction toggle.

Content Management

Cards are managed as an array in the property panel — add or remove as many cards as needed, each with its own name, role, bio, CTA label, CTA URL, featured toggle, avatar index, and photo upload. The fan spread algorithm automatically recalculates positions to keep all cards balanced regardless of how many you add.

61:T8b9,

A production-ready preloader component for Framer that keeps your content hidden until the page is fully loaded. Built with pure React and requestAnimationFrame for silky-smooth, jank-free animations on any device.

How It Works

When the page loads, AKPreloader takes over the screen with a dark overlay. A small image box opens from the center, cycles through your photos one by one, then closes. The dark layer slides upward revealing a splash screen with your custom text. After a short hold, the splash slides away and your content appears — all in one fluid sequence.

If the page hasn't finished loading by the time the image cycle ends, the component loops through the images again automatically until everything is ready. No content ever flashes before it's loaded.

Features

Images

- Open-ended image array — add as many or as few as you need

- Upload directly from the Framer right panel, no external URLs required

- Images cycle with a smooth crossfade transition

Typography

- Full Framer font control — family, weight, size, line height, letter spacing

- Separate color picker for the splash text

- Edit the splash text directly from the right panel

Colors

- Dark layer background color

- Splash layer background color

- Progress bar track and fill colors — all independently controlled

Timing

- Six independent timing controls in milliseconds: image box open, cycle speed, image box close, dark layer slide, text hold duration, and content reveal

- Fine-tune the entire sequence feel without touching the code

Behavior

- Automatically covers the full screen at any viewport size — fixed, 100vw × 100vh, z-index 9999

- Loops image cycle if page load takes longer than expected

- Disappears completely from the DOM after the sequence ends — zero performance overhead afterward

- Canvas preview mode with a Replay toggle to re-run the animation without leaving the editor

No dependencies beyond React and the Framer SDK.

62:T95e,

Component Details

NavMenuBox is built as a single self-contained Framer code component powered by React and Framer Motion. It is designed to drop into any Framer project without configuration, exposing all visual and structural properties through Framer's native Property Controls panel so designers can customize everything without touching the code.

Trigger Button The menu is activated by a pill-shaped button that accepts full control over its label, background color, text color, font size, and font family. The icon toggles between a plus and a close symbol to communicate state clearly.

Dropdown Box On click, an animated box appears below the button with a scale and fade entrance powered by Framer Motion's AnimatePresence. The box is divided into two panels. The left panel holds the navigation links and the right panel holds the image slider. On mobile the layout stacks vertically, navigation on top and the slider below, matching the behavior shown in the reference design.

Navigation Links Each menu item is an object containing a label and an href. Items animate in sequentially with a staggered delay on open. Hovering any item reduces its opacity for a clean interactive feel. The full array of items is editable directly from the Property Controls panel using Framer's Object array control.

Image Slider The slider panel accepts an array of images and cycles through them automatically every three seconds. Dot indicators at the bottom allow manual navigation. The panel gracefully handles zero images with an empty state placeholder.

Responsive Behavior The component listens to window resize events and switches layout at a configurable breakpoint, defaulting to 768px. The mobile layout reduces the box width to 280px, slightly decreases the font size, and compresses the slider height to 160px to fit smaller screens comfortably.

Property Controls Every visual property is exposed to Framer's inspector panel including button label, button background, button text color, button font size, menu background, menu text color, menu font size, mobile breakpoint, menu items array, and images array. This means the component behaves like a native Framer component with no code editing required after installation.

5a:["$","$L5f",null,{"value":{"fallback":{"$inf$activity-creator-2030b503-8159-41b3-aeff-1194fbfc562b-all:/unified/creator/2030b503-8159-41b3-aeff-1194fbfc562b/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2030b503-8159-41b3-aeff-1194fbfc562b:/unified/posts/?creator=2030b503-8159-41b3-aeff-1194fbfc562b&with=reposts":[{"data":[{"id":"019dd2ec-1e60-749e-b24f-f5650b1a31ea","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rtwZAZWZYniT7H0FHBQz","resolved":true,"title":"AK Team Member Cards","body":"$60","bodyJson":null,"introduction":"AbuKotsh","slug":"akteammembercards","author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/rtwZAZWZYniT7H0FHBQz/akteammembercards-jDZ9B6g0J30ndGFthd7xb6JGchBr6a","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-22T19:08:09.649Z","updatedAt":"2026-04-28T07:19:10.743Z","publishedAt":"2026-04-28T07:09:42.880Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://akteammembercards.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/iSlR3287-ak-team-member-cards-for-framer","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"OQBOWFkx4RvPYjNfqbkI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":24,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-28T07:09:42.880Z","updatedAt":"2026-04-28T07:09:42.880Z"},{"id":"019dce7f-5add-7010-9b1f-06d1f4fe1ec9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tGzAzUGIpk3dOwiEAbOd","resolved":true,"title":"AK FAQ","body":"

ContentBadge Label, Heading, SubheadingFAQ Items (Array) — each item includes: Question, Answer, CategoryFooter Text & Button Label

ColorsAccent Color (icon color and active border)Question Color, Answer ColorItem Background, Item BorderNumber Color, Footer Background

LayoutMax Width — control the component widthPadding Top / Bottom / HorizontalItem Gap, Border Radius

TypographyFont Family, Heading Size, Question Size, Answer Size

Features (On/Off)Show Badge, Show Search, Show Tabs, Show Numbers, Show FooterMulti-expand (open multiple questions at the same time)

AnimationDuration (ms), Easing (7 options including Spring Bounce)

Dark ModeOne toggle switches the entire theme automatically

","bodyJson":null,"introduction":"AbuKotsh","slug":"ak-faq","author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/tGzAzUGIpk3dOwiEAbOd/ak-accordion-AQ0b7jVmyJbYsALM5jbbnJic7BbfTb","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-05T11:30:01.601Z","updatedAt":"2026-04-27T10:32:53.504Z","publishedAt":"2026-04-27T10:32:26.077Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AKFaq-MvNyYi.js@OGVxnelQ98kGOI4B71j3","previewUrl":"https://akfaq.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"OGVxnelQ98kGOI4B71j3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":34,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T10:32:26.077Z","updatedAt":"2026-04-27T10:32:26.077Z"},{"id":"019daf82-7f92-70c9-93e0-112ac83eb77a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Z31lpz4rECRJUsqEls1Q","resolved":true,"title":"AK Preloader","body":"$61","bodyJson":null,"introduction":"AbuKotsh","slug":"ak-preloader","author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Z31lpz4rECRJUsqEls1Q/ak-preloader-mF7U67sV29hO95crLD1Bp3vs9tTm0u","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-10T13:13:30.354Z","updatedAt":"2026-04-22T12:24:17.087Z","publishedAt":"2026-04-21T10:07:38.386Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AKPreloader-F5rCn2.js@vUr03sqNznisBYcDQUmD","previewUrl":"https://akpreloader.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"vUr03sqNznisBYcDQUmD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-21T10:07:38.386Z","updatedAt":"2026-04-21T10:07:38.386Z"},{"id":"019daee1-9387-7192-8a0d-5912c2ef003a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[],"resources":[{"id":"14940","resolved":true,"title":"First Code","body":null,"bodyJson":null,"introduction":"We design and program custom smart systems that advance your business and keep pace with your ambitions. With us, ideas are transformed into robust, reliable, and scalable digital products.","slug":"first-code","author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/sites/14940/thumbnail-h5Gk0NTqk10nW9BeDpbiELOefufxP5.jpg","metadata":{"tint":{"h":210,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-21T07:11:52.198Z","updatedAt":"2026-04-23T11:43:22.790Z","publishedAt":"2026-04-21T07:11:52.199Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://first-code.com/","categories":[{"id":"1fec15c2-ca4a-4d52-bf3a-c04e6d002202","name":"SaaS","slug":"saas"},{"id":"ddd39099-5b17-42e0-b333-7b7c480a114f","name":"Business","slug":"business"}],"mainCategory":null,"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-04-21T07:11:52.199Z","updatedAt":"2026-04-21T07:11:52.199Z"},{"id":"019d9a79-cb3b-77e8-8ffd-542e7818e4ab","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dscqd4SEqZYgpstN8CmE","resolved":true,"title":"AK Nav Menu Box","body":"$62","bodyJson":null,"introduction":"AbuKotsh","slug":"ak-nav-menu-box","author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dscqd4SEqZYgpstN8CmE/ak-nav-menu-box-FYabl0ZCYwqPlOml3eijytwoETGvSV","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-07T20:10:33.489Z","updatedAt":"2026-04-16T14:57:20.177Z","publishedAt":"2026-04-17T08:06:06.395Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AKNavMenuBox-JDMbZB.js@E1X4g66eNd2e8JUIXCZ1","previewUrl":"https://akmainmenu.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"E1X4g66eNd2e8JUIXCZ1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":25,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-17T08:06:06.395Z","updatedAt":"2026-04-17T08:06:06.395Z"},{"id":"019d904f-0d39-79ac-b291-70db2a643153","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JzTByTD0iVliAUR1GvuU","resolved":true,"title":"AK Services Section","body":"

The component is ready! Here’s what it includes:

Framer Property Controls:Each service card comes with full control over:

Icon — upload an image + choose its position (left or right)
Title — text, font family, size, color, and weight (Regular → Black)
Description — textarea, font family, size, color, and weight
Tags — dynamic array with controls for background color, text color, and dot color
Slider — image array set by the user, with drag/swipe support

Section Level Controls:

Number of columns (1 to ....)
Card spacing (gap)
Background color
Section title, subheading, and badge

","bodyJson":null,"introduction":"AbuKotsh","slug":"ak-services-section","author":{"framerUserId":"2030b503-8159-41b3-aeff-1194fbfc562b","name":"Khalid Abukotsh","slug":"khalid-abukotsh","avatar":"https://framerusercontent.com/avatars/users/2030b503-8159-41b3-aeff-1194fbfc562b/-zaB4o-EP","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JzTByTD0iVliAUR1GvuU/ak-services-section-Ala9zNN5cURYvC6EpTcmDhhCzD0zig","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-05T16:59:03.141Z","updatedAt":"2026-04-15T08:58:50.568Z","publishedAt":"2026-04-15T08:43:13.081Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AKservices-oJwgp8.js@OgfGj2oSGClhGS20N5z1","previewUrl":"https://akservicescomponent.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"OgfGj2oSGClhGS20N5z1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":79,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T08:43:13.081Z","updatedAt":"2026-04-15T08:43:13.081Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]