@remotion/promo-pages 4.0.418 → 4.0.419

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.
package/dist/Homepage.js CHANGED
@@ -967,7 +967,7 @@ var useIsPlayer = () => {
967
967
  function truthy(value) {
968
968
  return Boolean(value);
969
969
  }
970
- var VERSION = "4.0.418";
970
+ var VERSION = "4.0.419";
971
971
  var checkMultipleRemotionVersions = () => {
972
972
  if (typeof globalThis === "undefined") {
973
973
  return;
@@ -19411,7 +19411,7 @@ SelectSeparator2.displayName = Separator.displayName;
19411
19411
  var Switch = ({ active, onToggle }) => {
19412
19412
  return /* @__PURE__ */ jsx252("div", {
19413
19413
  "data-active": active,
19414
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
19414
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
19415
19415
  onClick: onToggle,
19416
19416
  children: /* @__PURE__ */ jsx252("div", {
19417
19417
  "data-active": active,
@@ -22060,7 +22060,7 @@ var PricingSlider = ({ value, onChange, min: min2, max: max2, step = 1 }) => {
22060
22060
  step,
22061
22061
  value,
22062
22062
  onChange: (e) => onChange(Number(e.target.value)),
22063
- className: "pricing-slider flex-1",
22063
+ className: "pricing-slider w-full",
22064
22064
  style: {
22065
22065
  background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`
22066
22066
  }
@@ -22233,7 +22233,7 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
22233
22233
  className: "flex-1"
22234
22234
  }),
22235
22235
  /* @__PURE__ */ jsx47("div", {
22236
- className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "opacity-0" : "opacity-100"),
22236
+ className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "hidden" : "opacity-100"),
22237
22237
  children: "Not selected"
22238
22238
  })
22239
22239
  ]
@@ -22320,27 +22320,33 @@ var CompanyPricing = () => {
22320
22320
  children: /* @__PURE__ */ jsx47("div", {
22321
22321
  className: "overflow-hidden",
22322
22322
  children: /* @__PURE__ */ jsxs9("div", {
22323
- className: "flex flex-row items-center gap-4 w-full py-3",
22323
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
22324
22324
  children: [
22325
- /* @__PURE__ */ jsx47(PricingSlider, {
22326
- value: devSeatCount,
22327
- onChange: setDevSeatCount,
22328
- min: 1,
22329
- max: 50
22325
+ /* @__PURE__ */ jsx47("div", {
22326
+ className: "flex-1 min-w-0",
22327
+ children: /* @__PURE__ */ jsx47(PricingSlider, {
22328
+ value: devSeatCount,
22329
+ onChange: setDevSeatCount,
22330
+ min: 1,
22331
+ max: 50
22332
+ })
22330
22333
  }),
22331
22334
  /* @__PURE__ */ jsxs9("div", {
22332
- className: "fontbrand shrink-0 w-[135px] text-right",
22335
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center",
22333
22336
  children: [
22334
22337
  devSeatCount,
22335
22338
  " ",
22336
22339
  devSeatCount === 1 ? "Seat" : "Seats"
22337
22340
  ]
22338
22341
  }),
22339
- /* @__PURE__ */ jsx47("div", {
22340
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
22341
- children: `$${new Intl.NumberFormat("en-US", {
22342
- maximumFractionDigits: 0
22343
- }).format(SEAT_PRICE * devSeatCount)}`
22342
+ /* @__PURE__ */ jsxs9("div", {
22343
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
22344
+ children: [
22345
+ "$",
22346
+ new Intl.NumberFormat("en-US", {
22347
+ maximumFractionDigits: 0
22348
+ }).format(SEAT_PRICE * devSeatCount)
22349
+ ]
22344
22350
  })
22345
22351
  ]
22346
22352
  })
@@ -22370,27 +22376,33 @@ var CompanyPricing = () => {
22370
22376
  children: /* @__PURE__ */ jsx47("div", {
22371
22377
  className: "overflow-hidden",
22372
22378
  children: /* @__PURE__ */ jsxs9("div", {
22373
- className: "flex flex-row items-center gap-4 w-full py-3",
22379
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
22374
22380
  children: [
22375
- /* @__PURE__ */ jsx47(PricingSlider, {
22376
- value: cloudRenders,
22377
- onChange: setCloudRenders,
22378
- min: 1000,
22379
- max: 1e5,
22380
- step: 1000
22381
+ /* @__PURE__ */ jsx47("div", {
22382
+ className: "flex-1 min-w-0",
22383
+ children: /* @__PURE__ */ jsx47(PricingSlider, {
22384
+ value: cloudRenders,
22385
+ onChange: setCloudRenders,
22386
+ min: 1000,
22387
+ max: 1e5,
22388
+ step: 1000
22389
+ })
22381
22390
  }),
22382
22391
  /* @__PURE__ */ jsxs9("div", {
22383
- className: "fontbrand shrink-0 w-[135px] text-right",
22392
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right",
22384
22393
  children: [
22385
22394
  new Intl.NumberFormat("en-US").format(cloudRenders),
22386
22395
  " Renders"
22387
22396
  ]
22388
22397
  }),
22389
- /* @__PURE__ */ jsx47("div", {
22390
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
22391
- children: `$${new Intl.NumberFormat("en-US", {
22392
- maximumFractionDigits: 0
22393
- }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
22398
+ /* @__PURE__ */ jsxs9("div", {
22399
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
22400
+ children: [
22401
+ "$",
22402
+ new Intl.NumberFormat("en-US", {
22403
+ maximumFractionDigits: 0
22404
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)
22405
+ ]
22394
22406
  })
22395
22407
  ]
22396
22408
  })
@@ -22739,7 +22751,7 @@ var GitHubStars = () => {
22739
22751
  width: "45px"
22740
22752
  }),
22741
22753
  /* @__PURE__ */ jsx50(StatItemContent, {
22742
- content: "34k",
22754
+ content: "35k",
22743
22755
  width: "80px",
22744
22756
  fontSize: "2.5rem",
22745
22757
  fontWeight: "bold"
@@ -62099,21 +62111,21 @@ var FEATURED_TEMPLATES = [
62099
62111
  showStackblitz: true
62100
62112
  },
62101
62113
  {
62102
- homePageLabel: "Prompt to Motion Graphics",
62103
- shortName: "Prompt to Motion Graphics (Next.js)",
62114
+ homePageLabel: "Prompt to Motion Graphics SaaS Starter Kit",
62115
+ shortName: "Prompt to Motion Graphics SaaS Starter Kit",
62104
62116
  org: "remotion-dev",
62105
- repoName: "template-prompt-to-motion-graphics",
62106
- description: "AI-powered code generation for Remotion",
62107
- longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser.',
62117
+ repoName: "template-prompt-to-motion-graphics-saas",
62118
+ description: "SaaS template for AI-powered code generation with Remotion",
62119
+ longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser. See the <a href="/docs/ai/ai-saas-template">documentation page</a> for more details.',
62108
62120
  promoBanner: {
62109
- width: 1920,
62110
- height: 1080,
62121
+ width: 2880,
62122
+ height: 1512,
62111
62123
  src: "/img/prompt-to-motion-graphics.png"
62112
62124
  },
62113
62125
  cliId: "prompt-to-motion-graphics",
62114
62126
  type: "image",
62115
62127
  defaultBranch: "main",
62116
- featuredOnHomePage: null,
62128
+ featuredOnHomePage: "https://prompt-to-motion-graphics-saas.vercel.app",
62117
62129
  previewURL: null,
62118
62130
  templateInMonorepo: "template-prompt-to-motion-graphics",
62119
62131
  allowEnableTailwind: false,
@@ -63186,7 +63198,7 @@ var GithubButton = () => {
63186
63198
  " ",
63187
63199
  /* @__PURE__ */ jsx160("div", {
63188
63200
  className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
63189
- children: "34k"
63201
+ children: "35k"
63190
63202
  })
63191
63203
  ]
63192
63204
  });
@@ -967,7 +967,7 @@ var useIsPlayer = () => {
967
967
  function truthy(value) {
968
968
  return Boolean(value);
969
969
  }
970
- var VERSION = "4.0.418";
970
+ var VERSION = "4.0.419";
971
971
  var checkMultipleRemotionVersions = () => {
972
972
  if (typeof globalThis === "undefined") {
973
973
  return;
@@ -19411,7 +19411,7 @@ SelectSeparator2.displayName = Separator.displayName;
19411
19411
  var Switch = ({ active, onToggle }) => {
19412
19412
  return /* @__PURE__ */ jsx252("div", {
19413
19413
  "data-active": active,
19414
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
19414
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
19415
19415
  onClick: onToggle,
19416
19416
  children: /* @__PURE__ */ jsx252("div", {
19417
19417
  "data-active": active,
@@ -22060,7 +22060,7 @@ var PricingSlider = ({ value, onChange, min: min2, max: max2, step = 1 }) => {
22060
22060
  step,
22061
22061
  value,
22062
22062
  onChange: (e) => onChange(Number(e.target.value)),
22063
- className: "pricing-slider flex-1",
22063
+ className: "pricing-slider w-full",
22064
22064
  style: {
22065
22065
  background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`
22066
22066
  }
@@ -22233,7 +22233,7 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
22233
22233
  className: "flex-1"
22234
22234
  }),
22235
22235
  /* @__PURE__ */ jsx47("div", {
22236
- className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "opacity-0" : "opacity-100"),
22236
+ className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "hidden" : "opacity-100"),
22237
22237
  children: "Not selected"
22238
22238
  })
22239
22239
  ]
@@ -22320,27 +22320,33 @@ var CompanyPricing = () => {
22320
22320
  children: /* @__PURE__ */ jsx47("div", {
22321
22321
  className: "overflow-hidden",
22322
22322
  children: /* @__PURE__ */ jsxs9("div", {
22323
- className: "flex flex-row items-center gap-4 w-full py-3",
22323
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
22324
22324
  children: [
22325
- /* @__PURE__ */ jsx47(PricingSlider, {
22326
- value: devSeatCount,
22327
- onChange: setDevSeatCount,
22328
- min: 1,
22329
- max: 50
22325
+ /* @__PURE__ */ jsx47("div", {
22326
+ className: "flex-1 min-w-0",
22327
+ children: /* @__PURE__ */ jsx47(PricingSlider, {
22328
+ value: devSeatCount,
22329
+ onChange: setDevSeatCount,
22330
+ min: 1,
22331
+ max: 50
22332
+ })
22330
22333
  }),
22331
22334
  /* @__PURE__ */ jsxs9("div", {
22332
- className: "fontbrand shrink-0 w-[135px] text-right",
22335
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center",
22333
22336
  children: [
22334
22337
  devSeatCount,
22335
22338
  " ",
22336
22339
  devSeatCount === 1 ? "Seat" : "Seats"
22337
22340
  ]
22338
22341
  }),
22339
- /* @__PURE__ */ jsx47("div", {
22340
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
22341
- children: `$${new Intl.NumberFormat("en-US", {
22342
- maximumFractionDigits: 0
22343
- }).format(SEAT_PRICE * devSeatCount)}`
22342
+ /* @__PURE__ */ jsxs9("div", {
22343
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
22344
+ children: [
22345
+ "$",
22346
+ new Intl.NumberFormat("en-US", {
22347
+ maximumFractionDigits: 0
22348
+ }).format(SEAT_PRICE * devSeatCount)
22349
+ ]
22344
22350
  })
22345
22351
  ]
22346
22352
  })
@@ -22370,27 +22376,33 @@ var CompanyPricing = () => {
22370
22376
  children: /* @__PURE__ */ jsx47("div", {
22371
22377
  className: "overflow-hidden",
22372
22378
  children: /* @__PURE__ */ jsxs9("div", {
22373
- className: "flex flex-row items-center gap-4 w-full py-3",
22379
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
22374
22380
  children: [
22375
- /* @__PURE__ */ jsx47(PricingSlider, {
22376
- value: cloudRenders,
22377
- onChange: setCloudRenders,
22378
- min: 1000,
22379
- max: 1e5,
22380
- step: 1000
22381
+ /* @__PURE__ */ jsx47("div", {
22382
+ className: "flex-1 min-w-0",
22383
+ children: /* @__PURE__ */ jsx47(PricingSlider, {
22384
+ value: cloudRenders,
22385
+ onChange: setCloudRenders,
22386
+ min: 1000,
22387
+ max: 1e5,
22388
+ step: 1000
22389
+ })
22381
22390
  }),
22382
22391
  /* @__PURE__ */ jsxs9("div", {
22383
- className: "fontbrand shrink-0 w-[135px] text-right",
22392
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right",
22384
22393
  children: [
22385
22394
  new Intl.NumberFormat("en-US").format(cloudRenders),
22386
22395
  " Renders"
22387
22396
  ]
22388
22397
  }),
22389
- /* @__PURE__ */ jsx47("div", {
22390
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
22391
- children: `$${new Intl.NumberFormat("en-US", {
22392
- maximumFractionDigits: 0
22393
- }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
22398
+ /* @__PURE__ */ jsxs9("div", {
22399
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
22400
+ children: [
22401
+ "$",
22402
+ new Intl.NumberFormat("en-US", {
22403
+ maximumFractionDigits: 0
22404
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)
22405
+ ]
22394
22406
  })
22395
22407
  ]
22396
22408
  })
@@ -22739,7 +22751,7 @@ var GitHubStars = () => {
22739
22751
  width: "45px"
22740
22752
  }),
22741
22753
  /* @__PURE__ */ jsx50(StatItemContent, {
22742
- content: "34k",
22754
+ content: "35k",
22743
22755
  width: "80px",
22744
22756
  fontSize: "2.5rem",
22745
22757
  fontWeight: "bold"
@@ -62099,21 +62111,21 @@ var FEATURED_TEMPLATES = [
62099
62111
  showStackblitz: true
62100
62112
  },
62101
62113
  {
62102
- homePageLabel: "Prompt to Motion Graphics",
62103
- shortName: "Prompt to Motion Graphics (Next.js)",
62114
+ homePageLabel: "Prompt to Motion Graphics SaaS Starter Kit",
62115
+ shortName: "Prompt to Motion Graphics SaaS Starter Kit",
62104
62116
  org: "remotion-dev",
62105
- repoName: "template-prompt-to-motion-graphics",
62106
- description: "AI-powered code generation for Remotion",
62107
- longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser.',
62117
+ repoName: "template-prompt-to-motion-graphics-saas",
62118
+ description: "SaaS template for AI-powered code generation with Remotion",
62119
+ longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser. See the <a href="/docs/ai/ai-saas-template">documentation page</a> for more details.',
62108
62120
  promoBanner: {
62109
- width: 1920,
62110
- height: 1080,
62121
+ width: 2880,
62122
+ height: 1512,
62111
62123
  src: "/img/prompt-to-motion-graphics.png"
62112
62124
  },
62113
62125
  cliId: "prompt-to-motion-graphics",
62114
62126
  type: "image",
62115
62127
  defaultBranch: "main",
62116
- featuredOnHomePage: null,
62128
+ featuredOnHomePage: "https://prompt-to-motion-graphics-saas.vercel.app",
62117
62129
  previewURL: null,
62118
62130
  templateInMonorepo: "template-prompt-to-motion-graphics",
62119
62131
  allowEnableTailwind: false,
@@ -63186,7 +63198,7 @@ var GithubButton = () => {
63186
63198
  " ",
63187
63199
  /* @__PURE__ */ jsx160("div", {
63188
63200
  className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
63189
- children: "34k"
63201
+ children: "35k"
63190
63202
  })
63191
63203
  ]
63192
63204
  });
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -967,7 +967,7 @@ var useIsPlayer = () => {
967
967
  function truthy(value) {
968
968
  return Boolean(value);
969
969
  }
970
- var VERSION = "4.0.418";
970
+ var VERSION = "4.0.419";
971
971
  var checkMultipleRemotionVersions = () => {
972
972
  if (typeof globalThis === "undefined") {
973
973
  return;
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -21016,7 +21016,7 @@ var PricingSlider = ({ value, onChange, min: min2, max: max2, step = 1 }) => {
21016
21016
  step,
21017
21017
  value,
21018
21018
  onChange: (e) => onChange(Number(e.target.value)),
21019
- className: "pricing-slider flex-1",
21019
+ className: "pricing-slider w-full",
21020
21020
  style: {
21021
21021
  background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`
21022
21022
  }
@@ -21189,7 +21189,7 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
21189
21189
  className: "flex-1"
21190
21190
  }),
21191
21191
  /* @__PURE__ */ jsx40("div", {
21192
- className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "opacity-0" : "opacity-100"),
21192
+ className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "hidden" : "opacity-100"),
21193
21193
  children: "Not selected"
21194
21194
  })
21195
21195
  ]
@@ -21276,27 +21276,33 @@ var CompanyPricing = () => {
21276
21276
  children: /* @__PURE__ */ jsx40("div", {
21277
21277
  className: "overflow-hidden",
21278
21278
  children: /* @__PURE__ */ jsxs9("div", {
21279
- className: "flex flex-row items-center gap-4 w-full py-3",
21279
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
21280
21280
  children: [
21281
- /* @__PURE__ */ jsx40(PricingSlider, {
21282
- value: devSeatCount,
21283
- onChange: setDevSeatCount,
21284
- min: 1,
21285
- max: 50
21281
+ /* @__PURE__ */ jsx40("div", {
21282
+ className: "flex-1 min-w-0",
21283
+ children: /* @__PURE__ */ jsx40(PricingSlider, {
21284
+ value: devSeatCount,
21285
+ onChange: setDevSeatCount,
21286
+ min: 1,
21287
+ max: 50
21288
+ })
21286
21289
  }),
21287
21290
  /* @__PURE__ */ jsxs9("div", {
21288
- className: "fontbrand shrink-0 w-[135px] text-right",
21291
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center",
21289
21292
  children: [
21290
21293
  devSeatCount,
21291
21294
  " ",
21292
21295
  devSeatCount === 1 ? "Seat" : "Seats"
21293
21296
  ]
21294
21297
  }),
21295
- /* @__PURE__ */ jsx40("div", {
21296
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
21297
- children: `$${new Intl.NumberFormat("en-US", {
21298
- maximumFractionDigits: 0
21299
- }).format(SEAT_PRICE * devSeatCount)}`
21298
+ /* @__PURE__ */ jsxs9("div", {
21299
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
21300
+ children: [
21301
+ "$",
21302
+ new Intl.NumberFormat("en-US", {
21303
+ maximumFractionDigits: 0
21304
+ }).format(SEAT_PRICE * devSeatCount)
21305
+ ]
21300
21306
  })
21301
21307
  ]
21302
21308
  })
@@ -21326,27 +21332,33 @@ var CompanyPricing = () => {
21326
21332
  children: /* @__PURE__ */ jsx40("div", {
21327
21333
  className: "overflow-hidden",
21328
21334
  children: /* @__PURE__ */ jsxs9("div", {
21329
- className: "flex flex-row items-center gap-4 w-full py-3",
21335
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
21330
21336
  children: [
21331
- /* @__PURE__ */ jsx40(PricingSlider, {
21332
- value: cloudRenders,
21333
- onChange: setCloudRenders,
21334
- min: 1000,
21335
- max: 1e5,
21336
- step: 1000
21337
+ /* @__PURE__ */ jsx40("div", {
21338
+ className: "flex-1 min-w-0",
21339
+ children: /* @__PURE__ */ jsx40(PricingSlider, {
21340
+ value: cloudRenders,
21341
+ onChange: setCloudRenders,
21342
+ min: 1000,
21343
+ max: 1e5,
21344
+ step: 1000
21345
+ })
21337
21346
  }),
21338
21347
  /* @__PURE__ */ jsxs9("div", {
21339
- className: "fontbrand shrink-0 w-[135px] text-right",
21348
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right",
21340
21349
  children: [
21341
21350
  new Intl.NumberFormat("en-US").format(cloudRenders),
21342
21351
  " Renders"
21343
21352
  ]
21344
21353
  }),
21345
- /* @__PURE__ */ jsx40("div", {
21346
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
21347
- children: `$${new Intl.NumberFormat("en-US", {
21348
- maximumFractionDigits: 0
21349
- }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
21354
+ /* @__PURE__ */ jsxs9("div", {
21355
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
21356
+ children: [
21357
+ "$",
21358
+ new Intl.NumberFormat("en-US", {
21359
+ maximumFractionDigits: 0
21360
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)
21361
+ ]
21350
21362
  })
21351
21363
  ]
21352
21364
  })
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -23356,7 +23356,7 @@ var useIsPlayer = () => {
23356
23356
  function truthy2(value) {
23357
23357
  return Boolean(value);
23358
23358
  }
23359
- var VERSION = "4.0.418";
23359
+ var VERSION = "4.0.419";
23360
23360
  var checkMultipleRemotionVersions = () => {
23361
23361
  if (typeof globalThis === "undefined") {
23362
23362
  return;
@@ -35707,7 +35707,7 @@ SelectSeparator2.displayName = Separator.displayName;
35707
35707
  var Switch = ({ active, onToggle }) => {
35708
35708
  return /* @__PURE__ */ jsx252("div", {
35709
35709
  "data-active": active,
35710
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
35710
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
35711
35711
  onClick: onToggle,
35712
35712
  children: /* @__PURE__ */ jsx252("div", {
35713
35713
  "data-active": active,
@@ -23350,7 +23350,7 @@ var useIsPlayer = () => {
23350
23350
  function truthy2(value) {
23351
23351
  return Boolean(value);
23352
23352
  }
23353
- var VERSION = "4.0.418";
23353
+ var VERSION = "4.0.419";
23354
23354
  var checkMultipleRemotionVersions = () => {
23355
23355
  if (typeof globalThis === "undefined") {
23356
23356
  return;
@@ -35701,7 +35701,7 @@ SelectSeparator2.displayName = Separator.displayName;
35701
35701
  var Switch = ({ active, onToggle }) => {
35702
35702
  return /* @__PURE__ */ jsx252("div", {
35703
35703
  "data-active": active,
35704
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
35704
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
35705
35705
  onClick: onToggle,
35706
35706
  children: /* @__PURE__ */ jsx252("div", {
35707
35707
  "data-active": active,
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -19751,21 +19751,21 @@ var FEATURED_TEMPLATES = [
19751
19751
  showStackblitz: true
19752
19752
  },
19753
19753
  {
19754
- homePageLabel: "Prompt to Motion Graphics",
19755
- shortName: "Prompt to Motion Graphics (Next.js)",
19754
+ homePageLabel: "Prompt to Motion Graphics SaaS Starter Kit",
19755
+ shortName: "Prompt to Motion Graphics SaaS Starter Kit",
19756
19756
  org: "remotion-dev",
19757
- repoName: "template-prompt-to-motion-graphics",
19758
- description: "AI-powered code generation for Remotion",
19759
- longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser.',
19757
+ repoName: "template-prompt-to-motion-graphics-saas",
19758
+ description: "SaaS template for AI-powered code generation with Remotion",
19759
+ longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser. See the <a href="/docs/ai/ai-saas-template">documentation page</a> for more details.',
19760
19760
  promoBanner: {
19761
- width: 1920,
19762
- height: 1080,
19761
+ width: 2880,
19762
+ height: 1512,
19763
19763
  src: "/img/prompt-to-motion-graphics.png"
19764
19764
  },
19765
19765
  cliId: "prompt-to-motion-graphics",
19766
19766
  type: "image",
19767
19767
  defaultBranch: "main",
19768
- featuredOnHomePage: null,
19768
+ featuredOnHomePage: "https://prompt-to-motion-graphics-saas.vercel.app",
19769
19769
  previewURL: null,
19770
19770
  templateInMonorepo: "template-prompt-to-motion-graphics",
19771
19771
  allowEnableTailwind: false,
package/dist/design.js CHANGED
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
package/dist/experts.js CHANGED
@@ -967,7 +967,7 @@ var useIsPlayer = () => {
967
967
  function truthy(value) {
968
968
  return Boolean(value);
969
969
  }
970
- var VERSION = "4.0.418";
970
+ var VERSION = "4.0.419";
971
971
  var checkMultipleRemotionVersions = () => {
972
972
  if (typeof globalThis === "undefined") {
973
973
  return;
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -21016,7 +21016,7 @@ var PricingSlider = ({ value, onChange, min: min2, max: max2, step = 1 }) => {
21016
21016
  step,
21017
21017
  value,
21018
21018
  onChange: (e) => onChange(Number(e.target.value)),
21019
- className: "pricing-slider flex-1",
21019
+ className: "pricing-slider w-full",
21020
21020
  style: {
21021
21021
  background: `linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) ${percentage}%, var(--background) ${percentage}%, var(--background) 100%)`
21022
21022
  }
@@ -21189,7 +21189,7 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
21189
21189
  className: "flex-1"
21190
21190
  }),
21191
21191
  /* @__PURE__ */ jsx40("div", {
21192
- className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "opacity-0" : "opacity-100"),
21192
+ className: cn2("fontbrand text-muted transition-opacity duration-150", checked ? "hidden" : "opacity-100"),
21193
21193
  children: "Not selected"
21194
21194
  })
21195
21195
  ]
@@ -21276,27 +21276,33 @@ var CompanyPricing = () => {
21276
21276
  children: /* @__PURE__ */ jsx40("div", {
21277
21277
  className: "overflow-hidden",
21278
21278
  children: /* @__PURE__ */ jsxs9("div", {
21279
- className: "flex flex-row items-center gap-4 w-full py-3",
21279
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
21280
21280
  children: [
21281
- /* @__PURE__ */ jsx40(PricingSlider, {
21282
- value: devSeatCount,
21283
- onChange: setDevSeatCount,
21284
- min: 1,
21285
- max: 50
21281
+ /* @__PURE__ */ jsx40("div", {
21282
+ className: "flex-1 min-w-0",
21283
+ children: /* @__PURE__ */ jsx40(PricingSlider, {
21284
+ value: devSeatCount,
21285
+ onChange: setDevSeatCount,
21286
+ min: 1,
21287
+ max: 50
21288
+ })
21286
21289
  }),
21287
21290
  /* @__PURE__ */ jsxs9("div", {
21288
- className: "fontbrand shrink-0 w-[135px] text-right",
21291
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center",
21289
21292
  children: [
21290
21293
  devSeatCount,
21291
21294
  " ",
21292
21295
  devSeatCount === 1 ? "Seat" : "Seats"
21293
21296
  ]
21294
21297
  }),
21295
- /* @__PURE__ */ jsx40("div", {
21296
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
21297
- children: `$${new Intl.NumberFormat("en-US", {
21298
- maximumFractionDigits: 0
21299
- }).format(SEAT_PRICE * devSeatCount)}`
21298
+ /* @__PURE__ */ jsxs9("div", {
21299
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
21300
+ children: [
21301
+ "$",
21302
+ new Intl.NumberFormat("en-US", {
21303
+ maximumFractionDigits: 0
21304
+ }).format(SEAT_PRICE * devSeatCount)
21305
+ ]
21300
21306
  })
21301
21307
  ]
21302
21308
  })
@@ -21326,27 +21332,33 @@ var CompanyPricing = () => {
21326
21332
  children: /* @__PURE__ */ jsx40("div", {
21327
21333
  className: "overflow-hidden",
21328
21334
  children: /* @__PURE__ */ jsxs9("div", {
21329
- className: "flex flex-row items-center gap-4 w-full py-3",
21335
+ className: "flex flex-row items-center gap-3 sm:gap-4 w-full py-3",
21330
21336
  children: [
21331
- /* @__PURE__ */ jsx40(PricingSlider, {
21332
- value: cloudRenders,
21333
- onChange: setCloudRenders,
21334
- min: 1000,
21335
- max: 1e5,
21336
- step: 1000
21337
+ /* @__PURE__ */ jsx40("div", {
21338
+ className: "flex-1 min-w-0",
21339
+ children: /* @__PURE__ */ jsx40(PricingSlider, {
21340
+ value: cloudRenders,
21341
+ onChange: setCloudRenders,
21342
+ min: 1000,
21343
+ max: 1e5,
21344
+ step: 1000
21345
+ })
21337
21346
  }),
21338
21347
  /* @__PURE__ */ jsxs9("div", {
21339
- className: "fontbrand shrink-0 w-[135px] text-right",
21348
+ className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right",
21340
21349
  children: [
21341
21350
  new Intl.NumberFormat("en-US").format(cloudRenders),
21342
21351
  " Renders"
21343
21352
  ]
21344
21353
  }),
21345
- /* @__PURE__ */ jsx40("div", {
21346
- className: "fontbrand font-bold min-w-[60px] text-right shrink-0",
21347
- children: `$${new Intl.NumberFormat("en-US", {
21348
- maximumFractionDigits: 0
21349
- }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)}`
21354
+ /* @__PURE__ */ jsxs9("div", {
21355
+ className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap",
21356
+ children: [
21357
+ "$",
21358
+ new Intl.NumberFormat("en-US", {
21359
+ maximumFractionDigits: 0
21360
+ }).format(Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE)
21361
+ ]
21350
21362
  })
21351
21363
  ]
21352
21364
  })
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -23356,7 +23356,7 @@ var useIsPlayer = () => {
23356
23356
  function truthy2(value) {
23357
23357
  return Boolean(value);
23358
23358
  }
23359
- var VERSION = "4.0.418";
23359
+ var VERSION = "4.0.419";
23360
23360
  var checkMultipleRemotionVersions = () => {
23361
23361
  if (typeof globalThis === "undefined") {
23362
23362
  return;
@@ -35707,7 +35707,7 @@ SelectSeparator2.displayName = Separator.displayName;
35707
35707
  var Switch = ({ active, onToggle }) => {
35708
35708
  return /* @__PURE__ */ jsx252("div", {
35709
35709
  "data-active": active,
35710
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
35710
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
35711
35711
  onClick: onToggle,
35712
35712
  children: /* @__PURE__ */ jsx252("div", {
35713
35713
  "data-active": active,
@@ -23350,7 +23350,7 @@ var useIsPlayer = () => {
23350
23350
  function truthy2(value) {
23351
23351
  return Boolean(value);
23352
23352
  }
23353
- var VERSION = "4.0.418";
23353
+ var VERSION = "4.0.419";
23354
23354
  var checkMultipleRemotionVersions = () => {
23355
23355
  if (typeof globalThis === "undefined") {
23356
23356
  return;
@@ -35701,7 +35701,7 @@ SelectSeparator2.displayName = Separator.displayName;
35701
35701
  var Switch = ({ active, onToggle }) => {
35702
35702
  return /* @__PURE__ */ jsx252("div", {
35703
35703
  "data-active": active,
35704
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
35704
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
35705
35705
  onClick: onToggle,
35706
35706
  children: /* @__PURE__ */ jsx252("div", {
35707
35707
  "data-active": active,
package/dist/tailwind.css CHANGED
@@ -1535,11 +1535,21 @@
1535
1535
  opacity: 100%;
1536
1536
  }
1537
1537
  }
1538
+ .sm\:w-\[150px\] {
1539
+ @media (width >= 40rem) {
1540
+ width: 150px;
1541
+ }
1542
+ }
1538
1543
  .sm\:grid-cols-2 {
1539
1544
  @media (width >= 40rem) {
1540
1545
  grid-template-columns: repeat(2, minmax(0, 1fr));
1541
1546
  }
1542
1547
  }
1548
+ .sm\:gap-4 {
1549
+ @media (width >= 40rem) {
1550
+ gap: calc(var(--spacing) * 4);
1551
+ }
1552
+ }
1543
1553
  .md\:mr-6 {
1544
1554
  @media (width >= 48rem) {
1545
1555
  margin-right: calc(var(--spacing) * 6);
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
package/dist/templates.js CHANGED
@@ -6016,7 +6016,7 @@ var useIsPlayer = () => {
6016
6016
  function truthy2(value) {
6017
6017
  return Boolean(value);
6018
6018
  }
6019
- var VERSION = "4.0.418";
6019
+ var VERSION = "4.0.419";
6020
6020
  var checkMultipleRemotionVersions = () => {
6021
6021
  if (typeof globalThis === "undefined") {
6022
6022
  return;
@@ -18367,7 +18367,7 @@ SelectSeparator2.displayName = Separator.displayName;
18367
18367
  var Switch = ({ active, onToggle }) => {
18368
18368
  return /* @__PURE__ */ jsx252("div", {
18369
18369
  "data-active": active,
18370
- className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
18370
+ className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0",
18371
18371
  onClick: onToggle,
18372
18372
  children: /* @__PURE__ */ jsx252("div", {
18373
18373
  "data-active": active,
@@ -19751,21 +19751,21 @@ var FEATURED_TEMPLATES = [
19751
19751
  showStackblitz: true
19752
19752
  },
19753
19753
  {
19754
- homePageLabel: "Prompt to Motion Graphics",
19755
- shortName: "Prompt to Motion Graphics (Next.js)",
19754
+ homePageLabel: "Prompt to Motion Graphics SaaS Starter Kit",
19755
+ shortName: "Prompt to Motion Graphics SaaS Starter Kit",
19756
19756
  org: "remotion-dev",
19757
- repoName: "template-prompt-to-motion-graphics",
19758
- description: "AI-powered code generation for Remotion",
19759
- longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser.',
19757
+ repoName: "template-prompt-to-motion-graphics-saas",
19758
+ description: "SaaS template for AI-powered code generation with Remotion",
19759
+ longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser. See the <a href="/docs/ai/ai-saas-template">documentation page</a> for more details.',
19760
19760
  promoBanner: {
19761
- width: 1920,
19762
- height: 1080,
19761
+ width: 2880,
19762
+ height: 1512,
19763
19763
  src: "/img/prompt-to-motion-graphics.png"
19764
19764
  },
19765
19765
  cliId: "prompt-to-motion-graphics",
19766
19766
  type: "image",
19767
19767
  defaultBranch: "main",
19768
- featuredOnHomePage: null,
19768
+ featuredOnHomePage: "https://prompt-to-motion-graphics-saas.vercel.app",
19769
19769
  previewURL: null,
19770
19770
  templateInMonorepo: "template-prompt-to-motion-graphics",
19771
19771
  allowEnableTailwind: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/promo-pages",
3
- "version": "4.0.418",
3
+ "version": "4.0.419",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -11,26 +11,26 @@
11
11
  },
12
12
  "type": "module",
13
13
  "dependencies": {
14
- "@remotion/animated-emoji": "4.0.418",
15
- "@remotion/design": "4.0.418",
16
- "@remotion/web-renderer": "4.0.418",
17
- "@remotion/lottie": "4.0.418",
18
- "@remotion/paths": "4.0.418",
19
- "@remotion/player": "4.0.418",
20
- "@remotion/shapes": "4.0.418",
21
- "@remotion/media": "4.0.418",
22
- "@remotion/svg-3d-engine": "4.0.418",
23
- "create-video": "4.0.418",
14
+ "@remotion/animated-emoji": "4.0.419",
15
+ "@remotion/design": "4.0.419",
16
+ "@remotion/web-renderer": "4.0.419",
17
+ "@remotion/lottie": "4.0.419",
18
+ "@remotion/paths": "4.0.419",
19
+ "@remotion/player": "4.0.419",
20
+ "@remotion/shapes": "4.0.419",
21
+ "@remotion/media": "4.0.419",
22
+ "@remotion/svg-3d-engine": "4.0.419",
23
+ "create-video": "4.0.419",
24
24
  "hls.js": "1.5.19",
25
25
  "polished": "4.3.1",
26
- "remotion": "4.0.418",
26
+ "remotion": "4.0.419",
27
27
  "zod": "3.22.3",
28
28
  "@mux/upchunk": "^3.5.0",
29
29
  "@vidstack/react": "1.12.13",
30
30
  "bun-plugin-tailwind": "0.1.2"
31
31
  },
32
32
  "devDependencies": {
33
- "@remotion/eslint-config-internal": "4.0.418",
33
+ "@remotion/eslint-config-internal": "4.0.419",
34
34
  "@eslint/eslintrc": "3.1.0",
35
35
  "@types/react": "19.2.7",
36
36
  "@types/react-dom": "19.2.3",