@@ -10,9 +10,18 @@ import { SiteHeader } from "@/components/marketing/SiteHeader";
1010import { Button } from "@/components/ui/Button" ;
1111import { Section } from "@/components/ui/Section" ;
1212import { SectionHeading } from "@/components/ui/SectionHeading" ;
13- import { GITHUB_URL , getMarketingPage , START_HREF } from "@/lib/marketing-pages" ;
13+ import {
14+ GITHUB_URL ,
15+ getMarketingPage ,
16+ START_HREF ,
17+ } from "@/lib/marketing-pages" ;
1418import { pageMetadata } from "@/lib/seo" ;
15- import { breadcrumbLd , faqLd , organizationLd , webPageLd } from "@/lib/structured-data" ;
19+ import {
20+ breadcrumbLd ,
21+ faqLd ,
22+ organizationLd ,
23+ webPageLd ,
24+ } from "@/lib/structured-data" ;
1625
1726const page = getMarketingPage ( "/about" ) ;
1827
@@ -33,7 +42,12 @@ export default function AboutPage() {
3342 < Effects />
3443 < JsonLd
3544 data = { [
36- webPageLd ( { name : page . title , description : page . description , path : page . path , type : "AboutPage" } ) ,
45+ webPageLd ( {
46+ name : page . title ,
47+ description : page . description ,
48+ path : page . path ,
49+ type : "AboutPage" ,
50+ } ) ,
3751 breadcrumbLd ( breadcrumbs ) ,
3852 faqLd ( page . faqs ) ,
3953 organizationLd ( ) ,
@@ -46,17 +60,30 @@ export default function AboutPage() {
4660 title = "We couldn't buy fast video, so we built it"
4761 lede = {
4862 < p >
49- Rend started as plumbing for Cap, our open source screen recorder. The story is short. We
50- needed video that played the instant someone opened a link, nothing on the market did it
51- the way we wanted, and so we wrote our own.
63+ Rend started as plumbing for Cap, our open source screen recorder.
64+ The story is short. We needed video that played the instant
65+ someone opened a link, nothing on the market did it the way we
66+ wanted, and so we wrote our own.
5267 </ p >
5368 }
5469 actions = {
5570 < >
56- < Button href = "https://cap.so" external size = "lg" variant = "secondary" className = "w-full sm:w-auto" >
71+ < Button
72+ href = "https://cap.so"
73+ external
74+ size = "lg"
75+ variant = "secondary"
76+ className = "w-full sm:w-auto"
77+ >
5778 Visit Cap
5879 </ Button >
59- < Button href = { GITHUB_URL } external size = "lg" variant = "secondary" className = "w-full sm:w-auto" >
80+ < Button
81+ href = { GITHUB_URL }
82+ external
83+ size = "lg"
84+ variant = "secondary"
85+ className = "w-full sm:w-auto"
86+ >
6087 < GitHubMark />
6188 Star on GitHub
6289 </ Button >
@@ -69,34 +96,41 @@ export default function AboutPage() {
6996 < SectionHeading title = "The video we kept losing" />
7097 < div className = "mt-8 flex max-w-[660px] flex-col gap-5 text-[17px] leading-[1.7] text-ink-soft" >
7198 < p >
72- Cap is a screen recorder. You hit record, capture something on your screen, and send a
73- link. The whole thing rests on one moment: a teammate clicks that link, and the video is
74- already playing. If it stalls, the moment is gone and so is their attention.
99+ Cap is a screen recorder. You hit record, capture something on
100+ your screen, and send a link. The whole thing rests on one moment:
101+ a teammate clicks that link, and the video is already playing. If
102+ it stalls, the moment is gone and so is their attention.
75103 </ p >
76104 < p >
77- For a while we stitched that moment together from the usual parts, and it mostly held up.
78- The slow case was always the same one: the very first time anyone opened a clip. Nothing
79- was cached, the bytes were sitting in some distant bucket, and the player just spun while
80- the round trips stacked up. That first frame is the one that matters most, and it was the
81- one we kept losing.
105+ For a while we stitched that moment together from the usual parts,
106+ and it mostly held up. The slow case was always the same one: the
107+ very first time anyone opened a clip. Nothing was cached, the
108+ bytes were sitting in some distant bucket, and the player just
109+ spun while the round trips stacked up. That first frame is the one
110+ that matters most, and it was the one we kept losing.
82111 </ p >
83112 < p >
84- So we went shopping. Minute-billed platforms, per-gigabyte CDNs, the lot. They were good
85- at the easy case, a video that has already been watched a thousand times and cached
86- everywhere. None of them were built for the cold open, the first request to a brand new
113+ So we went shopping. Minute-billed platforms, per-gigabyte CDNs,
114+ the lot. They were good at the easy case, a video that has already
115+ been watched a thousand times and cached everywhere. None of them
116+ were built for the cold open, the first request to a brand new
87117 recording, which for a screen recorder is most of the traffic.
88118 </ p >
89119 < p >
90- In the end we built it ourselves. Rend warms the opening seconds of every video onto
91- hardware sitting close to the viewer, before anyone presses play. The first request hands
92- back real frames while the rest streams in behind it. The cold case stopped being the slow
93- case, and Cap started feeling instant.
120+ In the end we built it ourselves. Rend generates the playback
121+ artifacts players need during processing and serves them through
122+ Rend-controlled URLs. The first request can hand back real HLS
123+ media without exposing private storage links, and Cap started
124+ feeling instant.
94125 </ p >
95126 < p >
96- Then it occurred to us that every developer shipping video runs into the same wall, so we
97- opened it up. Rend is its own product now, running on the exact code that serves Cap.
127+ Then it occurred to us that every developer shipping video runs
128+ into the same wall, so we opened it up. Rend is its own product
129+ now, running on the exact code that serves Cap.
130+ </ p >
131+ < p className = "font-head text-[26px] leading-snug text-ink" >
132+ Cap runs entirely on Rend.
98133 </ p >
99- < p className = "font-head text-[26px] leading-snug text-ink" > Cap runs entirely on Rend.</ p >
100134 </ div >
101135 </ Section >
102136
@@ -107,9 +141,10 @@ export default function AboutPage() {
107141 lede = "We did not keep a faster version for ourselves. Rend is open source, and the code you self-host is what we run for Cap."
108142 />
109143 < p className = "mt-5 max-w-[640px] text-[17px] leading-[1.6] text-muted" >
110- The server is AGPL and the player and SDKs are MIT. You can read every line, run it on your
111- own machines for free, or let us run the edge for you. We do not charge for the software. We
112- charge for the network that makes it fast.
144+ The server is AGPL and the player and SDKs are MIT. You can read
145+ every line, run it on your own machines for free, or let us run the
146+ edge for you. We do not charge for the software. We charge for the
147+ network that makes it fast.
113148 </ p >
114149 < div className = "mt-8 flex flex-wrap items-center gap-x-6 gap-y-3" >
115150 < Button href = { GITHUB_URL } external variant = "secondary" size = "md" >
@@ -128,20 +163,31 @@ export default function AboutPage() {
128163 { /* The team */ }
129164 < Section tone = "sunken" aria-label = "The team behind Rend" >
130165 < img src = "/cap-logo.svg" alt = "Cap" className = "h-8 w-auto" />
131- < h2 className = "mt-6 text-[clamp(26px,5vw,40px)] leading-[1.12]" > A small team that hates buffering</ h2 >
166+ < h2 className = "mt-6 text-[clamp(26px,5vw,40px)] leading-[1.12]" >
167+ A small team that hates buffering
168+ </ h2 >
132169 < p className = "mt-5 max-w-[640px] text-[17px] leading-[1.6] text-muted" >
133- We are the team behind Cap. We care, maybe a little too much, about video that loads the
134- second you ask for it. Rend is the infrastructure we built to get there, and we run it in
135- the open so you can hold us to it.
170+ We are the team behind Cap. We care, maybe a little too much, about
171+ video that loads the second you ask for it. Rend is the
172+ infrastructure we built to get there, and we run it in the open so
173+ you can hold us to it.
136174 </ p >
137175 < div className = "mt-8" >
138- < Button href = "https://cap.so" external variant = "secondary" size = "md" >
176+ < Button
177+ href = "https://cap.so"
178+ external
179+ variant = "secondary"
180+ size = "md"
181+ >
139182 Visit Cap
140183 </ Button >
141184 </ div >
142185 </ Section >
143186
144- < Faq faqs = { page . faqs } lede = "A few questions we get about who is behind Rend." />
187+ < Faq
188+ faqs = { page . faqs }
189+ lede = "A few questions we get about who is behind Rend."
190+ />
145191
146192 < CtaSection
147193 title = "Build on the infrastructure that runs Cap"
0 commit comments