@remotion/promo-pages 5.0.0-canary.3 → 5.0.1-canary

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/.turbo/turbo-make.log +8 -0
  2. package/bundle.ts +38 -0
  3. package/dist/Homepage.js +1 -1
  4. package/dist/homepage/Pricing.js +1 -1
  5. package/eslint.config.mjs +7 -0
  6. package/index.html +13 -0
  7. package/package.json +3 -6
  8. package/public/fire.mp3 +0 -0
  9. package/public/img/cluster.png +0 -0
  10. package/public/img/code-sample-new.png +0 -0
  11. package/public/img/freelancers/alex.jpeg +0 -0
  12. package/public/img/freelancers/antoine.jpeg +0 -0
  13. package/public/img/freelancers/ayush.png +0 -0
  14. package/public/img/freelancers/benjamin.jpeg +0 -0
  15. package/public/img/freelancers/default.png +0 -0
  16. package/public/img/freelancers/florent.jpeg +0 -0
  17. package/public/img/freelancers/karel.jpeg +0 -0
  18. package/public/img/freelancers/lorenzo.jpeg +0 -0
  19. package/public/img/freelancers/mickael.jpeg +0 -0
  20. package/public/img/freelancers/mohit.jpeg +0 -0
  21. package/public/img/freelancers/pramod.jpg +0 -0
  22. package/public/img/freelancers/pranav.jpg +0 -0
  23. package/public/img/freelancers/rahul.png +0 -0
  24. package/public/img/freelancers/ray.jpeg +0 -0
  25. package/public/img/freelancers/stephen.png +0 -0
  26. package/public/img/freelancers/umungo.png +0 -0
  27. package/public/img/freelancers/yehor.jpeg +0 -0
  28. package/public/img/gt-planar-black.woff2 +0 -0
  29. package/public/img/gt-planar-bold.woff2 +0 -0
  30. package/public/img/gt-planar-medium.woff2 +0 -0
  31. package/public/img/gt-planar-regular.woff2 +0 -0
  32. package/public/img/logo-small.png +0 -0
  33. package/public/img/mp4.png +0 -0
  34. package/public/img/player-demo.mp4 +0 -0
  35. package/public/img/player-example-dark.png +0 -0
  36. package/public/img/player-example.png +0 -0
  37. package/public/img/writeinreact.png +0 -0
  38. package/public/partyhorn.mp3 +0 -0
  39. package/public/sad.mp3 +0 -0
  40. package/src/cn.ts +6 -0
  41. package/src/components/Homepage.tsx +88 -0
  42. package/src/components/homepage/BackgroundAnimation.tsx +108 -0
  43. package/src/components/homepage/ChooseTemplate.tsx +57 -0
  44. package/src/components/homepage/CodeExample.tsx +89 -0
  45. package/src/components/homepage/CommunityStats.tsx +54 -0
  46. package/src/components/homepage/CommunityStatsItems.tsx +304 -0
  47. package/src/components/homepage/Counter.tsx +110 -0
  48. package/src/components/homepage/Demo/Card.tsx +273 -0
  49. package/src/components/homepage/Demo/Cards.tsx +129 -0
  50. package/src/components/homepage/Demo/Comp.tsx +157 -0
  51. package/src/components/homepage/Demo/CurrentCountry.tsx +97 -0
  52. package/src/components/homepage/Demo/DemoError.tsx +18 -0
  53. package/src/components/homepage/Demo/DemoErrorIcon.tsx +32 -0
  54. package/src/components/homepage/Demo/DemoRender.tsx +166 -0
  55. package/src/components/homepage/Demo/DigitWheel.tsx +179 -0
  56. package/src/components/homepage/Demo/DisplayedEmoji.tsx +81 -0
  57. package/src/components/homepage/Demo/DoneCheckmark.tsx +39 -0
  58. package/src/components/homepage/Demo/DownloadNudge.tsx +62 -0
  59. package/src/components/homepage/Demo/DragAndDropNudge.tsx +57 -0
  60. package/src/components/homepage/Demo/EmojiCard.tsx +198 -0
  61. package/src/components/homepage/Demo/Minus.tsx +21 -0
  62. package/src/components/homepage/Demo/PlayPauseButton.tsx +66 -0
  63. package/src/components/homepage/Demo/PlayerControls.tsx +48 -0
  64. package/src/components/homepage/Demo/PlayerSeekBar.tsx +325 -0
  65. package/src/components/homepage/Demo/PlayerVolume.tsx +83 -0
  66. package/src/components/homepage/Demo/Progress.tsx +38 -0
  67. package/src/components/homepage/Demo/Spinner.tsx +60 -0
  68. package/src/components/homepage/Demo/Switcher.tsx +54 -0
  69. package/src/components/homepage/Demo/Temperature.tsx +44 -0
  70. package/src/components/homepage/Demo/TemperatureNumber.tsx +68 -0
  71. package/src/components/homepage/Demo/ThemeNudge.tsx +72 -0
  72. package/src/components/homepage/Demo/TimeDisplay.tsx +43 -0
  73. package/src/components/homepage/Demo/TrendingRepos.tsx +106 -0
  74. package/src/components/homepage/Demo/icons.tsx +114 -0
  75. package/src/components/homepage/Demo/index.tsx +158 -0
  76. package/src/components/homepage/Demo/math.ts +43 -0
  77. package/src/components/homepage/Demo/types.ts +6 -0
  78. package/src/components/homepage/Editor.tsx +67 -0
  79. package/src/components/homepage/EvaluateRemotion.tsx +92 -0
  80. package/src/components/homepage/FreePricing.tsx +295 -0
  81. package/src/components/homepage/GetStartedStrip.tsx +77 -0
  82. package/src/components/homepage/GitHubButton.tsx +23 -0
  83. package/src/components/homepage/IconForTemplate.tsx +154 -0
  84. package/src/components/homepage/IfYouKnowReact.tsx +29 -0
  85. package/src/components/homepage/InfoTooltip.tsx +25 -0
  86. package/src/components/homepage/MoreTemplatesButton.tsx +29 -0
  87. package/src/components/homepage/MuxVideo.tsx +68 -0
  88. package/src/components/homepage/NewsletterButton.tsx +88 -0
  89. package/src/components/homepage/Pricing.tsx +49 -0
  90. package/src/components/homepage/PricingBulletPoint.tsx +50 -0
  91. package/src/components/homepage/RealMp4Videos.tsx +50 -0
  92. package/src/components/homepage/Spacer.tsx +5 -0
  93. package/src/components/homepage/TemplateIcon.tsx +36 -0
  94. package/src/components/homepage/TextInput.tsx +62 -0
  95. package/src/components/homepage/TrustedByBanner.tsx +194 -0
  96. package/src/components/homepage/VideoApps.tsx +231 -0
  97. package/src/components/homepage/VideoAppsShowcase.tsx +276 -0
  98. package/src/components/homepage/VideoAppsTitle.tsx +24 -0
  99. package/src/components/homepage/VideoPlayerWithControls.tsx +188 -0
  100. package/src/components/homepage/WriteInReact.tsx +34 -0
  101. package/src/components/homepage/YouAreHere.tsx +30 -0
  102. package/src/components/homepage/custom.css +57 -0
  103. package/src/components/homepage/layout/Button.tsx +93 -0
  104. package/src/components/homepage/layout/colors.ts +17 -0
  105. package/src/components/homepage/layout/use-color-mode.tsx +44 -0
  106. package/src/components/homepage/layout/use-el-size.ts +51 -0
  107. package/src/components/homepage/layout/use-mobile-layout.ts +8 -0
  108. package/src/components/homepage/video-player.css +24 -0
  109. package/src/components/icons/blank.tsx +13 -0
  110. package/src/components/icons/clone.tsx +10 -0
  111. package/src/components/icons/code-hike.tsx +15 -0
  112. package/src/components/icons/cubes.tsx +13 -0
  113. package/src/components/icons/js.tsx +17 -0
  114. package/src/components/icons/next.tsx +64 -0
  115. package/src/components/icons/overlay.tsx +24 -0
  116. package/src/components/icons/remix.tsx +24 -0
  117. package/src/components/icons/skia.tsx +13 -0
  118. package/src/components/icons/stargazer.tsx +13 -0
  119. package/src/components/icons/still.tsx +13 -0
  120. package/src/components/icons/tailwind.tsx +22 -0
  121. package/src/components/icons/tiktok.tsx +13 -0
  122. package/src/components/icons/ts.tsx +18 -0
  123. package/src/components/icons/tts.tsx +13 -0
  124. package/src/components/icons/undo.tsx +11 -0
  125. package/src/components/icons/waveform.tsx +13 -0
  126. package/src/fonts.css +30 -0
  127. package/src/index.css +74 -0
  128. package/src/main.tsx +12 -0
  129. package/tsconfig.json +15 -0
  130. package/vite.config.ts +9 -0
package/.turbo/turbo-make.log ADDED
@@ -0,0 +1,8 @@
1
+
2
+ 
3
+ > @remotion/promo-pages@4.0.258 make /Users/jonathanburger/remotion/packages/promo-pages
4
+ > bun --env-file=../.env.bundle bundle.ts
5
+
6
+ ≈ tailwindcss v4.0.0
7
+
8
+ Done in 53ms
package/bundle.ts ADDED
@@ -0,0 +1,38 @@
1
+ import {$} from 'bun';
2
+ import {NoReactInternals} from 'remotion/no-react';
3
+
4
+ if (process.env.NODE_ENV !== 'production') {
5
+ throw new Error('This script must be run using NODE_ENV=production');
6
+ }
7
+
8
+ const nodeVersion =
9
+ await $`node -e "console.log(typeof structuredClone)"`.text();
10
+ if (nodeVersion.trim() === 'undefined') {
11
+ if (NoReactInternals.ENABLE_V5_BREAKING_CHANGES) {
12
+ throw new Error(
13
+ 'Error: You are using Node.js without structuredClone. Please upgrade to Node.js 17 or newer.',
14
+ );
15
+ } else {
16
+ console.log(
17
+ 'Node does not have structuredClone. Passing because we are not building the site.',
18
+ );
19
+ process.exit(0);
20
+ }
21
+ }
22
+
23
+ await $`bunx tailwindcss -i src/index.css -o dist/tailwind.css`;
24
+
25
+ const result = await Bun.build({
26
+ entrypoints: [
27
+ './src/components/Homepage.tsx',
28
+ './src/components/homepage/Pricing.tsx',
29
+ ],
30
+ format: 'esm',
31
+ external: ['react', 'react-dom', 'lottie-web', 'hls.js', 'plyr', 'zod'],
32
+ });
33
+
34
+ for (const output of result.outputs) {
35
+ await Bun.write('dist/' + output.path, await output.text());
36
+ }
37
+
38
+ export {};
package/dist/Homepage.js CHANGED
@@ -7880,7 +7880,7 @@ var CompanyPricing = () => {
7880
7880
  children: [
7881
7881
  /* @__PURE__ */ jsx4("div", {
7882
7882
  className: "fontbrand font-bold text-lg",
7883
- children: "WebCodecs Conversion Units"
7883
+ children: "WebCodec Conversion Units"
7884
7884
  }),
7885
7885
  /* @__PURE__ */ jsxs4("div", {
7886
7886
  className: "text-muted fontbrand text-sm",
package/dist/homepage/Pricing.js CHANGED
@@ -1845,7 +1845,7 @@ var CompanyPricing = () => {
1845
1845
  children: [
1846
1846
  /* @__PURE__ */ jsx4("div", {
1847
1847
  className: "fontbrand font-bold text-lg",
1848
- children: "WebCodecs Conversion Units"
1848
+ children: "WebCodec Conversion Units"
1849
1849
  }),
1850
1850
  /* @__PURE__ */ jsxs4("div", {
1851
1851
  className: "text-muted fontbrand text-sm",
package/eslint.config.mjs ADDED
@@ -0,0 +1,7 @@
1
+ import {remotionFlatConfig} from '@remotion/eslint-config-internal';
2
+
3
+ const config = remotionFlatConfig({react: true});
4
+
5
+ export default {
6
+ ...config,
7
+ };
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + React + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/promo-pages",
3
- "version": "5.0.0-canary.3",
3
+ "version": "5.0.1-canary",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -9,9 +9,6 @@
9
9
  "lint": "tsc && eslint src",
10
10
  "dev": "vite"
11
11
  },
12
- "files": [
13
- "dist"
14
- ],
15
12
  "type": "module",
16
13
  "dependencies": {
17
14
  "@remotion/animated-emoji": "4.0.259",
@@ -23,6 +20,8 @@
23
20
  "create-video": "4.0.259",
24
21
  "hls.js": "1.5.19",
25
22
  "polished": "4.3.1",
23
+ "react": "19.0.0",
24
+ "react-dom": "19.0.0",
26
25
  "remotion": "4.0.259",
27
26
  "vite": "^5.4.12",
28
27
  "zod": "3.22.3"
@@ -39,8 +38,6 @@
39
38
  "tailwindcss": "4.0.0",
40
39
  "@tailwindcss/cli": "4.0.0",
41
40
  "@tailwindcss/vite": "4.0.0",
42
- "react": "19.0.0",
43
- "react-dom": "19.0.0",
44
41
  "tailwindcss-scoped-preflight": "3.4.10",
45
42
  "@vitejs/plugin-react-swc": "^3.5.0",
46
43
  "tailwind-merge": "2.5.2",
package/public/fire.mp3 ADDED
Binary file
package/public/img/cluster.png ADDED
Binary file
package/public/img/code-sample-new.png ADDED
Binary file
package/public/img/freelancers/alex.jpeg ADDED
Binary file
package/public/img/freelancers/ayush.png ADDED
Binary file
package/public/img/freelancers/rahul.png ADDED
Binary file
package/public/img/freelancers/ray.jpeg ADDED
Binary file
package/public/img/gt-planar-black.woff2 ADDED
Binary file
package/public/img/gt-planar-bold.woff2 ADDED
Binary file
package/public/img/logo-small.png ADDED
Binary file
package/public/img/mp4.png ADDED
Binary file
package/public/img/player-demo.mp4 ADDED
Binary file
package/public/img/player-example.png ADDED
Binary file
package/public/img/writeinreact.png ADDED
Binary file
package/public/partyhorn.mp3 ADDED
Binary file
package/public/sad.mp3 ADDED
Binary file
package/src/cn.ts ADDED
@@ -0,0 +1,6 @@
1
+ import {clsx, type ClassValue} from 'clsx';
2
+ import {twMerge} from 'tailwind-merge';
3
+
4
+ export function cn(...inputs: ClassValue[]) {
5
+ return twMerge(clsx(inputs));
6
+ }
package/src/components/Homepage.tsx ADDED
@@ -0,0 +1,88 @@
1
+ 'use client';
2
+
3
+ import React from 'react';
4
+ import {BackgroundAnimation} from './homepage/BackgroundAnimation';
5
+ import CommunityStats from './homepage/CommunityStats';
6
+ import './homepage/custom.css';
7
+ import {Demo} from './homepage/Demo';
8
+ import {LightningFastEditor} from './homepage/Editor';
9
+ import EvaluateRemotionSection from './homepage/EvaluateRemotion';
10
+ import {IfYouKnowReact} from './homepage/IfYouKnowReact';
11
+ import type {ColorMode} from './homepage/layout/use-color-mode';
12
+ import {ColorModeProvider} from './homepage/layout/use-color-mode';
13
+ import {NewsletterButton} from './homepage/NewsletterButton';
14
+ import {Pricing} from './homepage/Pricing';
15
+ import {RealMP4Videos} from './homepage/RealMp4Videos';
16
+ import TrustedByBanner from './homepage/TrustedByBanner';
17
+ import {VideoApps} from './homepage/VideoApps';
18
+ import VideoAppsShowcase from './homepage/VideoAppsShowcase';
19
+ import {SectionTitle, VideoAppsTitle} from './homepage/VideoAppsTitle';
20
+ import {WriteInReact} from './homepage/WriteInReact';
21
+
22
+ export const NewLanding: React.FC<{
23
+ readonly colorMode: ColorMode;
24
+ readonly setColorMode: (colorMode: ColorMode) => void;
25
+ }> = ({colorMode, setColorMode}) => {
26
+ return (
27
+ <ColorModeProvider colorMode={colorMode} setColorMode={setColorMode}>
28
+ <div className="bg-[var(--background)] relative">
29
+ <div>
30
+ <div>
31
+ <BackgroundAnimation />
32
+ </div>
33
+ <br />
34
+ <br />
35
+ <br />
36
+ <br />
37
+ <div className="max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 relative">
38
+ <WriteInReact />
39
+ <br />
40
+ <IfYouKnowReact />
41
+ <br />
42
+ <br />
43
+ <br />
44
+ <br />
45
+ <br />
46
+ <br />
47
+ <RealMP4Videos />
48
+ <br />
49
+ <br />
50
+ <br />
51
+ <br />
52
+ <LightningFastEditor />
53
+ <br />
54
+ <br />
55
+ <br />
56
+ <VideoAppsTitle />
57
+ <VideoApps active="remotion" />
58
+ <br />
59
+ <br />
60
+ <VideoAppsShowcase />
61
+ <br />
62
+ <br />
63
+ <Demo />
64
+ <br />
65
+ <br />
66
+ <br />
67
+ <SectionTitle>Pricing</SectionTitle>
68
+ <Pricing />
69
+ <TrustedByBanner />
70
+ <br />
71
+ <EvaluateRemotionSection />
72
+ <br />
73
+ <br />
74
+ <br />
75
+ <CommunityStats />
76
+ <br />
77
+ <br />
78
+ <br />
79
+ <NewsletterButton />
80
+ <br />
81
+ <br />
82
+ <br />
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </ColorModeProvider>
87
+ );
88
+ };
package/src/components/homepage/BackgroundAnimation.tsx ADDED
@@ -0,0 +1,108 @@
1
+ 'use client';
2
+
3
+ import {getLength} from '@remotion/paths';
4
+ import React, {useEffect} from 'react';
5
+
6
+ const rx = 0.2;
7
+ const ry = 0.45;
8
+
9
+ function ellipseToPath(cx: number, cy: number): string {
10
+ let output = 'M' + (cx - rx).toString() + ',' + cy.toString();
11
+ output +=
12
+ 'a' +
13
+ rx.toString() +
14
+ ',' +
15
+ ry.toString() +
16
+ ' 0 1,0 ' +
17
+ (2 * rx).toString() +
18
+ ',0';
19
+ output +=
20
+ 'a' +
21
+ rx.toString() +
22
+ ',' +
23
+ ry.toString() +
24
+ ' 0 1,0 ' +
25
+ (-2 * rx).toString() +
26
+ ',0';
27
+ return output;
28
+ }
29
+
30
+ const strokeWidth = 0.035;
31
+
32
+ export const BackgroundAnimation: React.FC = () => {
33
+ const d = ellipseToPath(0.5, 0.5);
34
+ const length = getLength(d);
35
+
36
+ const css = `
37
+ @keyframes bganimation {
38
+ from {
39
+ stroke-dashoffset: 0
40
+ }
41
+
42
+ to {
43
+ stroke-dashoffset: ${length};
44
+ }
45
+ }
46
+ `;
47
+
48
+ useEffect(() => {
49
+ const _style = document.createElement('style');
50
+ _style.innerHTML = css;
51
+ document.head.appendChild(_style);
52
+ }, [css]);
53
+
54
+ return (
55
+ <div className=" w-full h-full left-[50%] ml-[-50%] min-w-0 lg:m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none">
56
+ <svg
57
+ className="translate-y-[-30%] lg:translate-y-[-50%]"
58
+ viewBox="0 0 1 1"
59
+ style={{
60
+ width: '100%',
61
+ position: 'absolute',
62
+ }}
63
+ >
64
+ <path
65
+ d={d}
66
+ fill="none"
67
+ stroke="var(--ifm-color-primary)"
68
+ strokeLinecap="round"
69
+ className="stroke-[0.04] lg:stroke-[0.035]"
70
+ style={{
71
+ transformOrigin: 'center center',
72
+ transform: `rotate(120deg)`,
73
+ animation: `bganimation 20s linear infinite`,
74
+ strokeDasharray: `${length * 0.2} ${length * 0.8}`,
75
+ }}
76
+ />
77
+ <path
78
+ d={d}
79
+ fill="none"
80
+ stroke="var(--ifm-color-primary)"
81
+ strokeLinecap="round"
82
+ strokeWidth={strokeWidth}
83
+ className="stroke-[0.04] lg:stroke-[0.035]"
84
+ style={{
85
+ transformOrigin: 'center center',
86
+ transform: `rotate(0deg)`,
87
+ animation: `bganimation 20s linear infinite`,
88
+ strokeDasharray: `${length * 0.2} ${length * 0.8}`,
89
+ }}
90
+ />
91
+ <path
92
+ d={d}
93
+ fill="none"
94
+ stroke="var(--ifm-color-primary)"
95
+ strokeLinecap="round"
96
+ strokeWidth={strokeWidth}
97
+ className="stroke-[0.04] lg:stroke-[0.035]"
98
+ style={{
99
+ transformOrigin: 'center center',
100
+ transform: `rotate(240deg)`,
101
+ animation: `bganimation 20s linear infinite`,
102
+ strokeDasharray: `${length * 0.2} ${length * 0.8}`,
103
+ }}
104
+ />
105
+ </svg>
106
+ </div>
107
+ );
108
+ };
package/src/components/homepage/ChooseTemplate.tsx ADDED
@@ -0,0 +1,57 @@
1
+ import {CreateVideoInternals} from 'create-video';
2
+ import React from 'react';
3
+
4
+ import {IconForTemplate} from './IconForTemplate';
5
+ import {MoreTemplatesButton} from './MoreTemplatesButton';
6
+ import {TemplateIcon} from './TemplateIcon';
7
+
8
+ export const ChooseTemplate: React.FC = () => {
9
+ return (
10
+ <div
11
+ style={{
12
+ display: 'flex',
13
+ flexDirection: 'column',
14
+ }}
15
+ >
16
+ <div
17
+ style={{
18
+ position: 'relative',
19
+ textAlign: 'center',
20
+ }}
21
+ >
22
+ <div
23
+ className="no-scroll-bar"
24
+ style={{
25
+ backgroundColor: 'var(--background)',
26
+ display: 'inline-flex',
27
+ flexDirection: 'row',
28
+ justifyContent: 'space-around',
29
+ boxShadow: '0 0 4px 0px var(--ifm-color-emphasis-200)',
30
+ borderRadius: 50,
31
+ alignItems: 'center',
32
+ padding: 8,
33
+ width: '100%',
34
+ maxWidth: '550px',
35
+ }}
36
+ >
37
+ {CreateVideoInternals.FEATURED_TEMPLATES.filter(
38
+ (f) => f.featuredOnHomePage,
39
+ ).map((template) => {
40
+ return (
41
+ <a
42
+ key={template.cliId}
43
+ className="text-inherit no-underline"
44
+ href={`/templates/${template.cliId}`}
45
+ >
46
+ <TemplateIcon label={template.featuredOnHomePage!}>
47
+ <IconForTemplate scale={0.7} template={template} />
48
+ </TemplateIcon>
49
+ </a>
50
+ );
51
+ })}
52
+ <MoreTemplatesButton />
53
+ </div>
54
+ </div>
55
+ </div>
56
+ );
57
+ };
package/src/components/homepage/CodeExample.tsx ADDED
@@ -0,0 +1,89 @@
1
+ 'use client';
2
+
3
+ import {Player} from '@remotion/player';
4
+ import React, {useState} from 'react';
5
+ import {interpolate, useCurrentFrame} from 'remotion';
6
+
7
+ const IMG_WIDTH = 1120;
8
+ const IMG_HEIGHT = 760;
9
+ const ASPECT = IMG_WIDTH / IMG_HEIGHT;
10
+
11
+ const Demo: React.FC = () => {
12
+ const frame = useCurrentFrame();
13
+ const scale = interpolate(frame, [0, 10, 40, 49], [0, 1, 1, 0]);
14
+ return (
15
+ <div
16
+ style={{
17
+ display: 'flex',
18
+ justifyContent: 'center',
19
+ alignItems: 'center',
20
+ flex: 1,
21
+ backgroundColor: 'black',
22
+ }}
23
+ >
24
+ <img style={{transform: `scale(${scale})`}} src="/img/logo-small.png" />
25
+ </div>
26
+ );
27
+ };
28
+
29
+ const container = {
30
+ maxWidth: 500,
31
+ height: (1 / ASPECT) * 500,
32
+ position: 'relative' as const,
33
+ };
34
+
35
+ const Preview: React.FC = () => {
36
+ return (
37
+ <Player
38
+ component={Demo}
39
+ compositionHeight={IMG_HEIGHT}
40
+ compositionWidth={IMG_WIDTH}
41
+ durationInFrames={50}
42
+ style={container}
43
+ controls
44
+ fps={30}
45
+ />
46
+ );
47
+ };
48
+
49
+ const tabStyle = {
50
+ appearance: 'none',
51
+ backgroundColor: 'transparent',
52
+ fontFamily: 'inherit',
53
+ border: 'none',
54
+ cursor: 'pointer',
55
+ color: 'var(--text-color)',
56
+ } as const;
57
+
58
+ type Tab = 'code' | 'preview';
59
+
60
+ export const CodeExample: React.FC = () => {
61
+ const [tab, setTab] = useState<Tab>('code');
62
+ return (
63
+ <div style={{flex: 1, textAlign: 'left', maxWidth: 700}}>
64
+ <button
65
+ type="button"
66
+ style={{...tabStyle, opacity: tab === 'code' ? 1 : 0.5}}
67
+ onClick={() => setTab('code')}
68
+ >
69
+ Code
70
+ </button>
71
+ |
72
+ <button
73
+ type="button"
74
+ style={{...tabStyle, opacity: tab === 'preview' ? 1 : 0.5}}
75
+ onClick={() => setTab('preview')}
76
+ >
77
+ Preview
78
+ </button>
79
+ <div>
80
+ {tab === 'code' && (
81
+ <div style={container}>
82
+ <img src="/img/code-sample-new.png" className="w-full" />
83
+ </div>
84
+ )}
85
+ {tab === 'preview' && <Preview />}
86
+ </div>
87
+ </div>
88
+ );
89
+ };
package/src/components/homepage/CommunityStats.tsx ADDED
@@ -0,0 +1,54 @@
1
+ import React from 'react';
2
+ import {
3
+ Contributors,
4
+ DiscordMembers,
5
+ GitHubStars,
6
+ InstallsPerMonth,
7
+ PagesOfDocs,
8
+ TemplatesAndExamples,
9
+ } from './CommunityStatsItems';
10
+ import {SectionTitle} from './VideoAppsTitle';
11
+
12
+ const SectionLink: React.FC<{
13
+ readonly href: string;
14
+ readonly children: React.ReactNode;
15
+ }> = ({href, children}) => (
16
+ <a
17
+ target="_blank"
18
+ href={href}
19
+ className={'no-underline text-inherit contents'}
20
+ >
21
+ {children}
22
+ </a>
23
+ );
24
+
25
+ const CommunityStats: React.FC = () => (
26
+ <div className={'m-auto max-w-[700px] text-center'}>
27
+ <SectionTitle>Never build alone</SectionTitle>
28
+ <div className={'fontbrand text-center mb-10'}>
29
+ Join a thriving community of developers.
30
+ </div>
31
+ <div className={'flex flex-wrap justify-between gap-4 w-full items-center'}>
32
+ <SectionLink href="https://www.npmjs.com/package/remotion">
33
+ <InstallsPerMonth />
34
+ </SectionLink>
35
+ <SectionLink href="https://www.remotion.dev/docs/">
36
+ <PagesOfDocs />
37
+ </SectionLink>
38
+ <SectionLink href="https://www.remotion.dev/templates">
39
+ <TemplatesAndExamples />
40
+ </SectionLink>
41
+ <SectionLink href="https://github.com/remotion-dev/remotion">
42
+ <GitHubStars />
43
+ </SectionLink>
44
+ <SectionLink href="https://remotion.dev/discord">
45
+ <DiscordMembers />
46
+ </SectionLink>
47
+ <SectionLink href="https://github.com/remotion-dev/remotion/graphs/contributors">
48
+ <Contributors />
49
+ </SectionLink>
50
+ </div>
51
+ </div>
52
+ );
53
+
54
+ export default CommunityStats;