[PR #12] [MERGED] Fade outgoing carousel cards instead of clipping them #11

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/12
Author: @jpcosta-comfy
Created: 10/1/2026
Status: ✅ Merged
Merged: 10/1/2026
Merged by: @cursor[bot]

Base: main ← Head: cursor/slide-fade-8ac0

📝 Commits (1)

480bfb9 Fade cards as they leave instead of clipping them.

📊 Changes

4 files changed (+137 additions, -9 deletions)

View changed files

📝 scripts/self-check.ts (+6 -1)
📝 src/app/globals.css (+12 -5)
📝 src/components/studio.tsx (+105 -3)
📝 src/lib/ease-slide.ts (+14 -0)

📄 Description

The slide ease was right, but the track’s overflow clipped each card into a hard rectangle as it left. Cards now leave the page column whole. If a card cannot clear the browser edge, it fades out, and the edge itself is a soft gradient rather than a cut.

Kept

Full-width active card at rest. Neighbors stay hidden (opacity 0, track clipped only while idle).
0.99s horizontal slide with the storyboard ease.slide curve. Next comes from the right, previous from the left.
Footer links: https://x.com/jp_costa and https://comfy.org/platform/comfy-api/

Mid-slide

Desktop, outgoing card faded, incoming card solid, no rectangular slice:

Desktop mid-slide with a soft fade

Mobile:

Mobile mid-slide with a soft fade

Desktop at rest, one full-width card:

Desktop at rest

_{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/12 **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/slide-fade-8ac0` --- ### 📝 Commits (1) - [`480bfb9`](https://github.com/Comfy-Org/jpcosta-comfy-apps/commit/480bfb9044dfd40b8392eec2d8d6a7af74269ad1) Fade cards as they leave instead of clipping them. ### 📊 Changes **4 files changed** (+137 additions, -9 deletions) <details> <summary>View changed files</summary> 📝 `scripts/self-check.ts` (+6 -1) 📝 `src/app/globals.css` (+12 -5) 📝 `src/components/studio.tsx` (+105 -3) 📝 `src/lib/ease-slide.ts` (+14 -0) </details> ### 📄 Description  The slide ease was right, but the track’s overflow clipped each card into a hard rectangle as it left. Cards now leave the page column whole. If a card cannot clear the browser edge, it fades out, and the edge itself is a soft gradient rather than a cut. ## Kept - Full-width active card at rest. Neighbors stay hidden (opacity 0, track clipped only while idle). - 0.99s horizontal slide with the storyboard `ease.slide` curve. Next comes from the right, previous from the left. - Footer links: https://x.com/jp_costa and https://comfy.org/platform/comfy-api/ ## Mid-slide Desktop, outgoing card faded, incoming card solid, no rectangular slice: [Desktop mid-slide with a soft fade](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Ffade-desktop-mid.png) Mobile: [Mobile mid-slide with a soft fade](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Ffade-mobile-mid.png) Desktop at rest, one full-width card: [Desktop at rest](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Ffade-desktop-rest.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