Animated backgrounds

packages/react/src/AnimatedBackground/AnimatedBackground.features.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import type {Meta, StoryFn} from '@storybook/react'
+import {AnimatedBackground, AnimatedBackgroundProps} from './AnimatedBackground'
+
+export default {
+  title: 'Components/AnimatedBackground/Features',
+  component: AnimatedBackground,
+  args: {
+    colorMode: 'light',
+    theme: 'collaboration',
+    variant: '1',
+    colorShift: 0.5,
+    lightShift: 0.5,
+    parallax: false,
+  },
+  argTypes: {
+    colorMode: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['light', 'dark'],
+    },
+    theme: {
+      control: {
+        type: 'select',
+      },
+      options: ['collaboration', 'ai', 'security', 'enterprise', 'productivity'],
+    },
+    variant: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['1', '2', '3'],
+    },
+    colorShift: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+    },
+    lightShift: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+    },
+    parallax: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+} as Meta<typeof AnimatedBackground>
+
+const Template: StoryFn<AnimatedBackgroundProps> = args => <AnimatedBackground {...args} />
+
+export const AI = Template.bind({})
+AI.args = {
+  theme: 'ai',
+}
+export const Security = Template.bind({})
+Security.args = {
+  theme: 'security',
+}
+
+export const Enterprise = Template.bind({})
+Enterprise.args = {
+  theme: 'enterprise',
+}
+
+export const Productivity = Template.bind({})
+Productivity.args = {
+  theme: 'productivity',
+}
+
+export const Collaboration = Template.bind({})
+Collaboration.args = {
+  theme: 'collaboration',
+}

packages/react/src/AnimatedBackground/AnimatedBackground.module.css

@@ -0,0 +1,2 @@
+.AnimatedBackground {
+}

packages/react/src/AnimatedBackground/AnimatedBackground.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "AnimatedBackground": string;
+};
+export = styles;
+

packages/react/src/AnimatedBackground/AnimatedBackground.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import type {Meta, StoryFn} from '@storybook/react'
+import {AnimatedBackground, AnimatedBackgroundProps} from './AnimatedBackground'
+
+export default {
+  title: 'Components/AnimatedBackground',
+  component: AnimatedBackground,
+  args: {
+    colorMode: 'light',
+    theme: 'collaboration',
+    variant: '1',
+    colorShift: 0.5,
+    lightShift: 0.5,
+    parallax: false,
+  },
+  argTypes: {
+    colorMode: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['light', 'dark'],
+    },
+    theme: {
+      control: {
+        type: 'select',
+      },
+      options: ['collaboration', 'ai', 'security', 'enterprise', 'productivity'],
+    },
+    variant: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['1', '2', '3'],
+    },
+    colorShift: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+    },
+    lightShift: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+    },
+    parallax: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+} as Meta<typeof AnimatedBackground>
+
+const Template: StoryFn<AnimatedBackgroundProps> = args => <AnimatedBackground {...args} />
+
+export const Playground = Template.bind({})
+Playground.args = {}

packages/react/src/AnimatedBackground/AnimatedBackground.tsx

@@ -0,0 +1,75 @@
+import React, {forwardRef, type Ref} from 'react'
+import clsx from 'clsx'
+
+import type {BaseProps} from '../component-helpers'
+import {Text} from '../'
+
+/** * Main Stylesheet (as a CSS Module) */
+import styles from './AnimatedBackground.module.css'
+
+type AnimatedBackgroundThemes = 'collaboration' | 'ai' | 'security' | 'enterprise' | 'productivity'
+type AnimatedBackgroundVariants = '1' | '2' | '3'
+
+export type AnimatedBackgroundProps = BaseProps<HTMLDivElement> &
+  React.HTMLAttributes<HTMLDivElement> & {
+    colorMode: 'light' | 'dark'
+    /**
+     * Controls overall visual appearance
+     */
+    theme: AnimatedBackgroundThemes
+    /**
+     * Alternative presentation for each theme
+     */
+    variant?: AnimatedBackgroundVariants
+    /**
+     * Controls color shift. Expects a value between 0 and 1.
+     */
+    colorShift?: number
+    /**
+     * Controls light shift. Expects a value between 0 and 1.
+     */
+    lightShift?: number
+    /**
+     * Toggles parallax effect
+     */
+    parallax?: boolean
+  }
+
+/**
+ * AnimatedBackground component
+ * {@link https://primer.style/brand/components/AnimatedBackground/ See usage examples}.
+ */
+export const AnimatedBackground = forwardRef(
+  (
+    {
+      className,
+      colorMode = 'light',
+      theme = 'ai',
+      variant = '1',
+      colorShift = 0.5,
+      lightShift = 0.5,
+      parallax = true,
+      ...props
+    }: AnimatedBackgroundProps,
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    if (colorShift < 0 || colorShift > 1) {
+      throw new Error('colorShift must be a value between 0 and 1')
+    }
+
+    if (lightShift < 0 || lightShift > 1) {
+      throw new Error('colorlightShiftShift must be a value between 0 and 1')
+    }
+
+    return (
+      <div ref={ref} className={clsx(styles.AnimatedBackground, className)} {...props}>
+        {/**
+         * WebGL stuff can go here
+         */}
+        <Text>
+          {`Color mode: ${colorMode}, Theme: ${theme}, Variant: ${variant}, Color shift: ${colorShift}, Light shift: ${lightShift}, Parallax: ${parallax}`}
+        </Text>
+      </div>
+    )
+  },
+)

packages/react/src/AnimatedBackground/index.ts

@@ -0,0 +1 @@
+export * from './AnimatedBackground'

packages/react/src/index.ts

@@ -48,6 +48,7 @@ export * from './Statistic'
 export * from './BreakoutBanner'
 export * from './Footnotes'
 export * from './Icon'
+export * from './AnimatedBackground'
 
 // hooks
 export * from './hooks/useWindowSize'