monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(console): /black shader improvements, performance, details (#8871)

Browse Source
This commit is contained in:
Aaron Iker
2026-01-16 13:35:58 +01:00
committed by GitHub
parent e8dad85233
commit d5a5e6e062
5 changed files with 847 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/console/app/src/routes/black.tsx
View File

@@ -3,7 +3,7 @@ import { Title, Meta, Link } from "@solidjs/meta"
import { createMemo, createSignal } from "solid-js"
import { github } from "~/lib/github"
import { config } from "~/config"
import LightRays, { defaultConfig, type LightRaysConfig, type LightRaysAnimationState } from "~/component/light-rays"
import Spotlight, { defaultConfig, type SpotlightAnimationState } from "~/component/spotlight"
import "./black.css"
export default function BlackLayout(props: RouteSectionProps) {
@@ -17,15 +17,14 @@ export default function BlackLayout(props: RouteSectionProps) {
: config.github.starsFormatted.compact,
)
const [lightRaysConfig, setLightRaysConfig] = createSignal<LightRaysConfig>(defaultConfig)
const [rayAnimationState, setRayAnimationState] = createSignal<LightRaysAnimationState>({
const [spotlightAnimationState, setSpotlightAnimationState] = createSignal<SpotlightAnimationState>({
time: 0,
intensity: 0.5,
pulseValue: 1,
})
const svgLightingValues = createMemo(() => {
const state = rayAnimationState()
const state = spotlightAnimationState()
const t = state.time
const wave1 = Math.sin(t * 1.5) * 0.5 + 0.5
@@ -33,11 +32,11 @@ export default function BlackLayout(props: RouteSectionProps) {
const wave3 = Math.sin(t * 0.8 + 2.5) * 0.5 + 0.5
const shimmerPos = Math.sin(t * 0.7) * 0.5 + 0.5
const glowIntensity = state.intensity * state.pulseValue * 0.35
const fillOpacity = 0.1 + wave1 * 0.08 * state.pulseValue
const strokeBrightness = 55 + wave2 * 25 * state.pulseValue
const glowIntensity = Math.max(state.intensity * state.pulseValue * 0.35, 0.15)
const fillOpacity = Math.max(0.1 + wave1 * 0.08 * state.pulseValue, 0.12)
const strokeBrightness = Math.max(55 + wave2 * 25 * state.pulseValue, 60)
const shimmerIntensity = wave3 * 0.15 * state.pulseValue
const shimmerIntensity = Math.max(wave3 * 0.15 * state.pulseValue, 0.08)
return {
glowIntensity,
@@ -56,10 +55,12 @@ export default function BlackLayout(props: RouteSectionProps) {
} as Record<string, string>
})
const handleAnimationFrame = (state: LightRaysAnimationState) => {
setRayAnimationState(state)
const handleAnimationFrame = (state: SpotlightAnimationState) => {
setSpotlightAnimationState(state)
}
const spotlightConfig = () => defaultConfig
return (
<div data-page="black">
<Title>OpenCode Black | Access all the world's best coding models</Title>
@@ -84,7 +85,7 @@ export default function BlackLayout(props: RouteSectionProps) {
/>
<Meta name="twitter:image" content="/social-share-black.png" />
<LightRays config={lightRaysConfig} class="header-light-rays" onAnimationFrame={handleAnimationFrame} />
<Spotlight config={spotlightConfig} class="header-spotlight" onAnimationFrame={handleAnimationFrame} />
<header data-component="header">
<A href="/" data-component="header-logo">