Skip to content

feat(console): Style improvements for /black, View Transition fixes #8739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaroniker merged 24 commits into from
Jan 15, 2026
Merged

feat(console): Style improvements for /black, View Transition fixes #8739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3bc995d
feat: restore former layout
aaroniker Jan 15, 2026
56a7fbe
feat: add ogl
aaroniker Jan 15, 2026
cf4fe5d
add light rays
aaroniker Jan 15, 2026
ad33807
feat: update select plan UI
aaroniker Jan 15, 2026
769c34c
fix: desktop shellOpen
aaroniker Jan 15, 2026
f2711bf
Merge branch 'dev' into update-design-subscriptions
aaroniker Jan 15, 2026
ecf33a7
Update Nix flake.lock and x86_64-linux hash
actions-user Jan 15, 2026
bd5a900
Update aarch64-darwin hash
actions-user Jan 15, 2026
abadacd
feat: small light rays tweaks
aaroniker Jan 15, 2026
d79dc29
Merge branch 'update-design-subscriptions' of https://github.com/anom…
aaroniker Jan 15, 2026
d8b8854
feat: remove ogl, add webgpu types
aaroniker Jan 15, 2026
977827c
feat: refacor light rays to WEBGPU
aaroniker Jan 15, 2026
864f7ce
feat: small style fixes, webgpu types
aaroniker Jan 15, 2026
64edbb6
fix: webgp buffer
aaroniker Jan 15, 2026
08068c3
Update Nix flake.lock and x86_64-linux hash
actions-user Jan 15, 2026
57b457f
Update aarch64-darwin hash
actions-user Jan 15, 2026
ccac97c
feat: transition improvements
aaroniker Jan 15, 2026
fdea599
Merge branch 'update-design-subscriptions' of https://github.com/anom…
aaroniker Jan 15, 2026
591f54c
feat: light rays improvement, mobile styles
aaroniker Jan 15, 2026
e258662
Merge branch 'dev' into update-design-subscriptions
aaroniker Jan 15, 2026
87eebad
Update Nix flake.lock and x86_64-linux hash
actions-user Jan 15, 2026
50badbd
Update aarch64-darwin hash
actions-user Jan 15, 2026
2a22111
fix: small style adjustments, light rays params
aaroniker Jan 15, 2026
b30c91d
Merge branch 'dev' into update-design-subscriptions
aaroniker Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/console/app/src/component/light-rays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ export const defaultConfig: LightRaysConfig = {
raysOrigin: "top-center",
raysColor: "#ffffff",
raysSpeed: 1.0,
lightSpread: 1.15,
rayLength: 4.0,
lightSpread: 1.2,
rayLength: 4.5,
sourceWidth: 0.1,
pulsating: true,
pulsatingMin: 0.9,
pulsatingMax: 1.0,
fadeDistance: 1.15,
saturation: 0.325,
pulsatingMax: 1.05,
fadeDistance: 1.25,
saturation: 0.35,
followMouse: false,
mouseInfluence: 0.05,
noiseAmount: 0.5,
Expand Down
50 changes: 23 additions & 27 deletions packages/console/app/src/routes/black.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,44 +89,42 @@
animation: reveal-terms 300ms cubic-bezier(0.25, 0, 0.5, 1) 50ms forwards;
}

::view-transition-old(action-20),
::view-transition-old(action-100),
::view-transition-old(action-200) {
animation: fade-out 100ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
::view-transition-old(actions-20),
::view-transition-old(actions-100),
::view-transition-old(actions-200) {
animation: fade-out 80ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

::view-transition-new(action-20),
::view-transition-new(action-100),
::view-transition-new(action-200) {
animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
::view-transition-new(actions-20),
::view-transition-new(actions-100),
::view-transition-new(actions-200) {
animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
opacity: 0;
}

::view-transition-group(plan-card-20),
::view-transition-group(plan-card-100),
::view-transition-group(plan-card-200) {
animation-duration: 200ms;
::view-transition-group(card-20),
::view-transition-group(card-100),
::view-transition-group(card-200) {
animation-duration: 250ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-image-pair(plan-card-20),
::view-transition-image-pair(plan-card-100),
::view-transition-image-pair(plan-card-200) {
::view-transition-image-pair(card-20),
::view-transition-image-pair(card-100),
::view-transition-image-pair(card-200) {
isolation: isolate;
overflow: hidden;
}

::view-transition-old(plan-card-20),
::view-transition-old(plan-card-100),
::view-transition-old(plan-card-200) {
animation: fade-out 120ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
::view-transition-old(card-20),
::view-transition-old(card-100),
::view-transition-old(card-200) {
mix-blend-mode: normal;
}

::view-transition-new(plan-card-20),
::view-transition-new(plan-card-100),
::view-transition-new(plan-card-200) {
animation: fade-in 150ms cubic-bezier(0.4, 0, 0.2, 1) 50ms forwards;
opacity: 0;
::view-transition-new(card-20),
::view-transition-new(card-100),
::view-transition-new(card-200) {
mix-blend-mode: normal;
}

Expand Down Expand Up @@ -362,8 +360,7 @@
gap: 12px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.17);
background-color: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
background: black;
background-clip: padding-box;
border-radius: 4px;
text-decoration: none;
Expand Down Expand Up @@ -421,7 +418,6 @@
margin: 0 auto;
position: relative;
background-color: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 1;

@media (max-width: 480px) {
Expand Down
70 changes: 0 additions & 70 deletions packages/console/app/src/routes/black/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,76 +98,6 @@ export default function Black() {
</div>
)}
</Match>
<Match when={selectedPlan()}>
{(plan) => (
<div data-slot="selected-plan">
<div data-slot="selected-card">
<div data-slot="icon" style={{ "view-transition-name": `icon-${plan().id}` }}>
<PlanIcon plan={plan().id} />
</div>
<p data-slot="price" style={{ "view-transition-name": `price-${plan().id}` }}>
<span data-slot="amount">${plan().id}</span>{" "}
<span data-slot="period">per person billed monthly</span>
<Show when={plan().multiplier}>
<span data-slot="multiplier">{plan().multiplier}</span>
</Show>
</p>
<ul data-slot="terms" style={{ "view-transition-name": `terms-${plan().id}` }}>
<li>Your subscription will not start immediately</li>
<li>You will be added to the waitlist and activated soon</li>
<li>Your card will be only charged when your subscription is activated</li>
<li>Usage limits apply, heavily automated use may reach limits sooner</li>
<li>Subscriptions for individuals, contact Enterprise for teams</li>
<li>Limits may be adjusted and plans may be discontinued in the future</li>
<li>Cancel your subscription at anytime</li>
</ul>
<div data-slot="actions" style={{ "view-transition-name": `actions-${plan().id}` }}>
<button type="button" onClick={() => cancel()} data-slot="cancel">
Cancel
</button>
<a href={`/black/subscribe/${plan().id}`} data-slot="continue">
Continue
</a>
</div>
</div>
</div>
)}
</Match>
<Match when={selectedPlan()}>
{(plan) => (
<div data-slot="selected-plan" style={{ "view-transition-name": "selected-plan" }}>
<div data-slot="selected-card">
<div data-slot="icon">
<PlanIcon plan={plan().id} />
</div>
<p data-slot="price">
<span data-slot="amount">${plan().id}</span>{" "}
<span data-slot="period">per person billed monthly</span>
<Show when={plan().multiplier}>
<span data-slot="multiplier">{plan().multiplier}</span>
</Show>
</p>
<ul data-slot="terms" style={{ "view-transition-name": `terms-${plan().id}` }}>
<li>Your subscription will not start immediately</li>
<li>You will be added to the waitlist and activated soon</li>
<li>Your card will be only charged when your subscription is activated</li>
<li>Usage limits apply, heavily automated use may reach limits sooner</li>
<li>Subscriptions for individuals, contact Enterprise for teams</li>
<li>Limits may be adjusted and plans may be discontinued in the future</li>
<li>Cancel your subscription at anytime</li>
</ul>
<div data-slot="actions" style={{ "view-transition-name": `actions-${plan().id}` }}>
<button type="button" onClick={() => cancel()} data-slot="cancel">
Cancel
</button>
<a href={`/black/subscribe/${plan().id}`} data-slot="continue">
Continue
</a>
</div>
</div>
</div>
)}
</Match>
</Switch>
<p data-slot="fine-print" style={{ "view-transition-name": "fine-print" }}>
Prices shown don't include applicable tax · <A href="/legal/terms-of-service">Terms of Service</A>
Expand Down