feat: smoother vertical tab animation

[adithyaakrishna]

Summary

• Improve the template tab-switch interaction in apps/sim/app/(home)/components/templates/templates.tsx so the active tab feels like a raised 3D slab moving between rows instead of snapping between states.
• This keeps the existing tab design intact, including the left wall, bottom depth strip, spacing, and active/inactive styling, while adding smoother motion.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: UI/UX polish

Testing

• Tested manually in the landing templates section.

Commands run:

• bunx biome check 'apps/sim/app/(home)/components/templates/templates.tsx'

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Before:

Screen.Recording.2026-03-09.at.9.29.43.PM.mov

After:

Screen.Recording.2026-03-09.at.9.28.48.PM.mov

[cursor]

PR Summary

Low Risk
Low risk UI-only change that adjusts styling/animation of the templates tab list without affecting data flow or business logic; main risk is minor visual/regression across browsers or reduced-motion expectations.

Overview
Improves the templates workflow tab switch interaction by replacing the snap/conditional active-tab markup with a single always-rendered structure whose left wall, bottom depth strip, text color, and chevron now animate via opacity, transform, and style transitions.

This keeps the existing visual design but makes the active tab feel like it slides/raises between rows, and simplifies the tab button rendering by computing depth once per item and removing the active/inactive JSX split.

^{Written by Cursor Bugbot for commit 19daf1e. This will update automatically on new commits. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 9, 2026 4:05pm

[greptile-apps]

Greptile Summary

This PR improves the vertical tab-switch animation in the landing templates section by replacing a conditional-render / IIFE pattern with always-rendered elements that animate via CSS opacity and transform transitions, giving the active tab a smooth "raised 3D slab" feel.

Key changes:

• The left-wall and bottom-wall decorative divs are now always in the DOM for every tab, with opacity: 0 → 1 transitions controlled by isActive.
• The inner content div now uses CSS transform: translate(8px, -8px) with a spring-like cubic-bezier(0.34, 1.4, 0.64, 1) curve for entry and cubic-bezier(0.4, 0, 0.2, 1) for exit.
• The IIFE pattern for scoping has been removed in favor of computing depth at the top of the loop — a cleaner approach.
• pointer-events-none is correctly added to purely decorative absolute-positioned elements.

The change is purely cosmetic and animation-focused with no logic or data-flow impact.

Confidence Score: 5/5

• Safe to merge — purely cosmetic animation changes with no logic, data-flow, or functional impact.
• This PR contains only UI/animation improvements in an isolated component. The changes replace a conditional DOM-rendering pattern with always-rendered elements that animate via CSS transitions. All existing workflow-to-depth-config mappings are intact. The animation curves and transition delays are properly structured CSS properties. No breaking changes, no data mutations, and no impact on other components or systems.
• No files require special attention

_{Last reviewed commit: 19daf1e}