[PR #11] [MERGED] Full-bleed carousel slide with storyboard ease #13

New issue

Closed

opened 2026-11-04 22:29:04 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-11-04 22:29:04 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/Comfy-Org/jpcosta-comfy-apps/pull/11
Author: @jpcosta-comfy
Created: 10/1/2026
Status: ✅ Merged
Merged: 10/1/2026
Merged by: @cursor[bot]

Base: main ← Head: cursor/full-bleed-slide-8ac0

📝 Commits (2)

ce9a902 Point the footer at JP's X profile and the Comfy API page.
1d342b4 Match the storyboard slide: full-bleed cards and ease.slide.

📊 Changes

4 files changed (+160 additions, -115 deletions)

View changed files

📝 scripts/self-check.ts (+17 -0)
📝 src/app/globals.css (+3 -21)
📝 src/components/studio.tsx (+91 -94)
➕ src/lib/ease-slide.ts (+49 -0)

📄 Description

The live carousel still showed neighboring cards and eased with a cubic-bezier. This matches the storyboard: the active card fills the page column, and the 0.99s move uses ease.slide from that project's util.js.

Merged to main and confirmed on https://comfy-api-apps.vercel.app after a hard refresh.

Motion

No side peek and no gap. The card track is the page content width. On production, the active card is exactly that width (desktop 1180px, mobile 366px) and every neighbor’s visible width is 0.
Next slides in from the right; previous slides in from the left. Duration is 0.99s. The curve is the storyboard velocity LUT. Production samples match that LUT within 1px. The old cubic-bezier is about 290px off the same samples. No bounce, spring, or crossfade.
Reduced motion still snaps. Header and footer stay put.

Footer

JP Costa → https://x.com/jp_costa
ComfyUI credit → https://comfy.org/platform/comfy-api/
Comfy Cloud stays https://cloud.comfy.org/

Run logic, deploy IDs, and the visible app list are unchanged.

Production

Desktop at rest, one full-width card:

Production desktop at rest, full-bleed card

Desktop mid-slide, two cards on one row:

Production desktop mid-slide

Mobile at rest:

Production mobile at rest, full-bleed card

Mobile mid-slide:

Production mobile mid-slide

_{To show artifacts inline, enable in settings.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/Comfy-Org/jpcosta-comfy-apps/pull/11 **Author:** [@jpcosta-comfy](https://github.com/jpcosta-comfy) **Created:** 10/1/2026 **Status:** ✅ Merged **Merged:** 10/1/2026 **Merged by:** [@cursor[bot]](https://github.com/apps/cursor) **Base:** `main` ← **Head:** `cursor/full-bleed-slide-8ac0` --- ### 📝 Commits (2) - [`ce9a902`](https://github.com/Comfy-Org/jpcosta-comfy-apps/commit/ce9a90254bba7f578001ead97b321dd8e5fadbb2) Point the footer at JP's X profile and the Comfy API page. - [`1d342b4`](https://github.com/Comfy-Org/jpcosta-comfy-apps/commit/1d342b4e29f28fc8485dd80546d6e2a57dd0ebf0) Match the storyboard slide: full-bleed cards and ease.slide. ### 📊 Changes **4 files changed** (+160 additions, -115 deletions) <details> <summary>View changed files</summary> 📝 `scripts/self-check.ts` (+17 -0) 📝 `src/app/globals.css` (+3 -21) 📝 `src/components/studio.tsx` (+91 -94) ➕ `src/lib/ease-slide.ts` (+49 -0) </details> ### 📄 Description  The live carousel still showed neighboring cards and eased with a cubic-bezier. This matches the storyboard: the active card fills the page column, and the 0.99s move uses `ease.slide` from that project's `util.js`. Merged to main and confirmed on https://comfy-api-apps.vercel.app after a hard refresh. ## Motion - No side peek and no gap. The card track is the page content width. On production, the active card is exactly that width (desktop 1180px, mobile 366px) and every neighbor’s visible width is 0. - Next slides in from the right; previous slides in from the left. Duration is 0.99s. The curve is the storyboard velocity LUT. Production samples match that LUT within 1px. The old cubic-bezier is about 290px off the same samples. No bounce, spring, or crossfade. - Reduced motion still snaps. Header and footer stay put. ## Footer - JP Costa → https://x.com/jp_costa - ComfyUI credit → https://comfy.org/platform/comfy-api/ - Comfy Cloud stays https://cloud.comfy.org/ Run logic, deploy IDs, and the visible app list are unchanged. ## Production Desktop at rest, one full-width card: [Production desktop at rest, full-bleed card](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Fprod-desktop-rest.png) Desktop mid-slide, two cards on one row: [Production desktop mid-slide](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Fprod-desktop-mid-slide.png) Mobile at rest: [Production mobile at rest, full-bleed card](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Fprod-mobile-rest.png) Mobile mid-slide: [Production mobile mid-slide](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Fprod-mobile-mid-slide.png) <sub>To show artifacts inline, <a href="https://cursor.com/dashboard/cloud-agents#my-pull-requests">enable</a> in settings.</sub>  <div><a href="https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a href="https://cursor.com/background-agent?bcId=bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a> </div> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

bsakaguchi

2026-11-04 22:29:04 +00:00