Skip to content

Commit c2cd549

Browse files
PickleNikPickleNik
committed
tweak animation timing, seer colors, add v1 of tabs ui for installation guide
1 parent e48f123 commit c2cd549

File tree

8 files changed

+162
-17
lines changed

8 files changed

+162
-17
lines changed

‎packages/mcp-cloudflare/src/client/components/animation/BackgroundDecorations.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,54 @@ export default function () {
1818
aria-hidden="true"
1919
>
2020
<defs>
21+
<filter
22+
id="nnnoise-darken-fine"
23+
filterUnits="objectBoundingBox"
24+
primitiveUnits="objectBoundingBox"
25+
x="-50%"
26+
y="-50%"
27+
width="200%"
28+
height="200%"
29+
colorInterpolationFilters="linearRGB"
30+
>
31+
{/* <!-- 1) Fine monochrome noise --> */}
32+
<feTurbulence
33+
type="fractalNoise"
34+
baseFrequency="0.69"
35+
numOctaves="1"
36+
seed="9"
37+
result="noise"
38+
/>
39+
<feColorMatrix in="noise" type="saturate" values="0" result="g" />
40+
41+
{/* <!-- 2) Shape the noise -> mostly near 0 with occasional spikes (speckles) --> */}
42+
{/* <!-- gamma < 1 = more speckles; > 1 = fewer --> */}
43+
<feComponentTransfer in="g" result="mask">
44+
<feFuncR type="gamma" amplitude="1" exponent="0.65" offset="0" />
45+
<feFuncG type="gamma" amplitude="1" exponent="0.65" offset="0" />
46+
<feFuncB type="gamma" amplitude="1" exponent="0.65" offset="0" />
47+
</feComponentTransfer>
48+
49+
{/* <!-- 3) Keep noise only where the element is opaque (transparent areas stay clean) --> */}
50+
<feComposite
51+
in="mask"
52+
in2="SourceAlpha"
53+
operator="in"
54+
result="maskedNoise"
55+
/>
56+
57+
{/* <!-- 4) Darken-only: out = SourceGraphic * (1 - strength * maskedNoise) --> */}
58+
{/* <!-- arithmetic: k1=-strength, k2=1, k3=0, k4=0 --> */}
59+
<feComposite
60+
in="SourceGraphic"
61+
in2="maskedNoise"
62+
operator="arithmetic"
63+
k1="-1"
64+
k2="1"
65+
k3="0"
66+
k4="0"
67+
/>
68+
</filter>
2169
<filter
2270
id="nnnoise-darken"
2371
filterUnits="objectBoundingBox"

‎packages/mcp-cloudflare/src/client/components/animation/TerminalAnimation.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function TerminalAnimation({
7777
label: "Finding solution",
7878
description: "LLM analyzes the context and comes up with a solution",
7979
startTime: 48.5,
80-
startSpeed: 30,
80+
startSpeed: 50,
8181
autoContinueMs: 50,
8282
autoPlay: false,
8383
lines: 8,
@@ -87,7 +87,7 @@ export default function TerminalAnimation({
8787
label: "Applying Edits",
8888
description: "LLM adds the suggested solution to the codebase",
8989
startTime: 146,
90-
startSpeed: 20,
90+
startSpeed: 26,
9191
autoContinueMs: 50,
9292
autoPlay: false,
9393
lines: 8,
@@ -96,7 +96,7 @@ export default function TerminalAnimation({
9696
label: "Validation",
9797
description: "Automaticall running tests to verify the solution works",
9898
startTime: 242,
99-
startSpeed: 20,
99+
startSpeed: 26,
100100
autoContinueMs: 50,
101101
autoPlay: false,
102102
// 32

‎packages/mcp-cloudflare/src/client/components/animation/browser-ui/DiffBlock.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function DiffBlock({
1111
<pre
1212
className={`${
1313
step === 4 ? "opacity-100 duration-300" : "opacity-0"
14-
} absolute inset-0 top-10 z-50 h-full bg-neutral-900 text-sm`}
14+
} absolute inset-0 top-10 z-50 h-full bg-[#201633] ![color:unset] text-sm`}
1515
style={{
1616
transitionDelay: step === 4 ? `${delay}s` : "0s",
1717
}}
@@ -32,7 +32,7 @@ export default function DiffBlock({
3232
}}`}
3333
key={line}
3434
style={{
35-
transitionDelay: step === 4 ? `${delay + 0.05 * idx}s` : "0s",
35+
transitionDelay: step === 4 ? `${delay + 0.025 * idx}s` : "0s",
3636
}}
3737
>
3838
{line}

‎packages/mcp-cloudflare/src/client/components/animation/browser-ui/IDEWindow.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function IDEWindow({ step }: { step: number }) {
3131
<div
3232
className={`${
3333
step === 4
34-
? "bg-black/20 opacity-100 delay-2000 translate-y-0"
34+
? "bg-black/20 opacity-100 delay-1250 translate-y-0"
3535
: "opacity-0 translate-y-2"
3636
} flex items-center justify-between gap-2 truncate duration-300 border-white/10 border-r px-4 py-2`}
3737
>
@@ -42,7 +42,7 @@ export default function IDEWindow({ step }: { step: number }) {
4242
<div
4343
className={`${
4444
step === 4
45-
? "bg-black/20 opacity-100 delay-3000 translate-y-0"
45+
? "bg-black/20 opacity-100 delay-2000 translate-y-0"
4646
: "opacity-0 translate-y-2"
4747
} flex items-center justify-between gap-2 truncate duration-300 border-white/10 border-r px-4 py-2`}
4848
>
@@ -51,8 +51,8 @@ export default function IDEWindow({ step }: { step: number }) {
5151
</div>
5252
</div>
5353
<DiffBlock diff={diff3} step={step} delay={0.1} />
54-
<DiffBlock diff={diff2} step={step} delay={2} />
55-
<DiffBlock diff={diff1} step={step} delay={3} />
54+
<DiffBlock diff={diff2} step={step} delay={1.25} />
55+
<DiffBlock diff={diff1} step={step} delay={2.0} />
5656
</div>
5757
</div>
5858
);

‎packages/mcp-cloudflare/src/client/components/animation/browser-ui/👀.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ export default function Seer({ step }: { step: number }) {
2424
</svg>
2525
{/* ⚠️ Seer */}
2626
<div
27-
className="relative z-10 mx-auto aspect-square w-36 overflow-hidden bg-gradient-to-br from-pink-400 to-pink-600"
27+
className="relative z-10 mx-auto aspect-square w-36 overflow-hidden bg-gradient-to-b from-pink-600 to-pink-400"
2828
style={{
2929
clipPath: `url(#${id})`,
3030
}}
3131
>
32+
<div className="bg-pink-300 [mask-image:linear-gradient(to_top,red,transparent)] absolute inset-0 [filter:url(#nnnoise-darken-fine)]" />
3233
{/* eye mask */}
3334
<div className="-translate-x-1/2 absolute left-1/2 mt-16 w-full shadow-2xl shadow-amber-500 [mask-image:radial-gradient(ellipse_100%_200%_at_top,red_50%,transparent_50%)]">
34-
<div className="bg-amber-200 [mask-image:radial-gradient(ellipse_at_bottom,red_50%,transparent_50%)]">
35+
<div className="bg-amber-100 [mask-image:radial-gradient(ellipse_at_bottom,red_50%,transparent_50%)]">
3536
{/* 👁️ Eye of the Seer */}
3637
<div
3738
className={`mx-auto h-8 w-8 translate-y-1/2 rounded-full bg-blue-700 delay-300 duration-1000 ${
@@ -41,8 +42,8 @@ export default function Seer({ step }: { step: number }) {
4142
</div>
4243
</div>
4344
</div>
44-
<div className="mt-6 mb-12 text-lg text-violet-300 flex items-center justify-center">
45-
<div className="relative mr-1.5">
45+
<div className="mt-6 mb-12 text-4xl font-semibold font-sans text-white flex items-center justify-center">
46+
<div className="relative mr-2 text-violet-300 font-bold">
4647
<span
4748
className={`${
4849
step === 2 &&

‎packages/mcp-cloudflare/src/client/components/fragments/install-tabs.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Grip } from "lucide-react";
2+
import { Prose } from "../ui/prose";
3+
4+
export default function InstallTabs({
5+
children,
6+
}: {
7+
children: React.ReactNode;
8+
}) {
9+
return (
10+
// <div className="mb-6 flex w-full items-center rounded-2xl bg-gradient-to-r from-purple-600/30 via-pink-600/30 to-red-600/30 p-1">
11+
<div className="relative bg-[#201633] rounded-2xl mb-6">
12+
<div className="flex">
13+
<div className="flex max-w-full">
14+
{/* <div className="absolute inset-x-1 bottom-1 rounded-xl h-17 w-full bg-[#201633]" /> */}
15+
{Array.from([
16+
"Cursor",
17+
"Claude Code",
18+
"Windsurf",
19+
"Visual Studio Code",
20+
"Warp",
21+
"Zed",
22+
]).map((name, i) => (
23+
<div key={name} className="relative group/tab cursor-pointer">
24+
{i > 0 && (
25+
<>
26+
<div className="group-hover/tab:scale-100 group-hover/tab:duration-200 duration-0 scale-0 absolute left-1 -translate-x-full -top-2 size-3 bg-[#201633] origin-bottom-right" />
27+
<div className="group-hover/tab:scale-100 group-hover/tab:duration-200 duration-0 scale-0 absolute left-0 -translate-x-full top-0 -translate-y-full size-4 rounded-full bg-[#392f59] origin-bottom-right" />
28+
</>
29+
)}
30+
<div className="absolute inset-[0.5px] bottom-4 bg-orange-400 bg-dots rounded-xl z-0" />
31+
<div className="absolute inset-[0.5px] bottom-6 bg-pink-600 bg-grid [--size:10px] rounded-xl z-0" />
32+
<div className="bg-[#201633] relative group-hover/tab:-translate-y-6 rounded-xl py-4 px-6 duration-200 group-hover/tab:ease-[cubic-bezier(0.175,0.885,0.32,1.275)] perspective-distant group-hover/tab:-rotate-x-45 text-nowrap">
33+
{name}
34+
</div>
35+
{i < 5 && (
36+
<>
37+
<div className="group-hover/tab:scale-100 group-hover/tab:duration-200 duration-0 scale-0 absolute right-1 translate-x-full -top-2 size-3 bg-[#201633] origin-bottom-left" />
38+
<div className="group-hover/tab:scale-100 group-hover/tab:duration-200 duration-0 scale-0 absolute right-0 translate-x-full top-0 -translate-y-full size-4 rounded-full bg-[#392f59] origin-bottom-left" />
39+
</>
40+
)}
41+
</div>
42+
))}
43+
</div>
44+
<Grip className="flex-shrink-0 ml-auto cursor-grab mr-4 mt-5 size-4 text-white/50 active:cursor-grabbing" />
45+
</div>
46+
<Prose className="p-4 pt-0">{children}</Prose>
47+
</div>
48+
// </div>
49+
);
50+
}

‎packages/mcp-cloudflare/src/client/components/fragments/remote-setup.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Prose } from "../ui/prose";
1010
import { NPM_REMOTE_NAME } from "@/constants";
1111
import { Button } from "../ui/button";
1212
import { Heading } from "../ui/base";
13+
import InstallTabs from "./install-tabs";
1314

1415
const mcpServerName = import.meta.env.DEV ? "sentry-dev" : "sentry";
1516

@@ -95,6 +96,50 @@ export default function RemoteSetup() {
9596
</Accordion>
9697
</Prose>
9798
<Heading as="h3">Integration Guides</Heading>
99+
<InstallTabs>
100+
<Button
101+
variant="secondary"
102+
size="sm"
103+
onClick={() => {
104+
const deepLink =
105+
"cursor://anysphere.cursor-deeplink/mcp/install?name=Sentry&config=eyJ1cmwiOiJodHRwczovL21jcC5zZW50cnkuZGV2L21jcCJ9";
106+
window.location.href = deepLink;
107+
}}
108+
className="mt-2 mb-2 bg-violet-300 text-black hover:bg-violet-400 hover:text-black"
109+
>
110+
Install in Cursor
111+
</Button>
112+
<ol>
113+
<li>
114+
Or manually: <strong>Cmd + Shift + J</strong> to open Cursor
115+
Settings.
116+
</li>
117+
<li>
118+
Select <strong>Tools and Integrations</strong>.
119+
</li>
120+
<li>
121+
Select <strong>New MCP Server</strong>.
122+
</li>
123+
<li>
124+
<CodeSnippet
125+
noMargin
126+
snippet={JSON.stringify(
127+
{
128+
mcpServers: {
129+
sentry: sentryMCPConfig,
130+
},
131+
},
132+
undefined,
133+
2,
134+
)}
135+
/>
136+
</li>
137+
<li>
138+
Optional: To use the service with <code>cursor-agent</code>:
139+
<CodeSnippet noMargin snippet={`cursor-agent mcp login sentry`} />
140+
</li>
141+
</ol>
142+
</InstallTabs>
98143
<Accordion type="single" collapsible>
99144
<SetupGuide id="cursor" title="Cursor">
100145
<Button

‎packages/mcp-cloudflare/src/client/index.css‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
}
162162

163163
body {
164-
@apply bg-[#160f24] bg-gradient-to-b from-background to-[#160f24] text-foreground;
164+
@apply bg-[#160f24] bg-gradient-to-b from-background to-background text-foreground;
165165
min-height: 100vh;
166166
font-family: "Rubik", -apple-system, "BlinkMacSystemFont", "Segoe UI",
167167
"Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -330,15 +330,16 @@
330330
}
331331

332332
.bg-grid {
333-
background-size: 40px 40px;
334-
background-position: -20px -20px;
333+
background-size: var(--size, 40px) var(--size, 40px);
334+
background-position: calc(-1 * var(--size, 40px) / 2)
335+
calc(-1 * var(--size, 40px) / 2);
335336
background-image: linear-gradient(to right, #fff2 1px, transparent 1px),
336337
linear-gradient(to bottom, #fff2 1px, transparent 1px);
337338
}
338339

339340
.bg-dots {
340341
background-image: radial-gradient(#fff4 1px, transparent 0);
341-
background-size: 40px 40px;
342+
background-size: var(--size, 40px) var(--size, 40px);
342343
}
343344

344345
.animate-issue-context {

0 commit comments

Comments
 (0)