diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
index cba8281..d89b4ab 100644
--- a/.github/workflows/cypress.yml
+++ b/.github/workflows/cypress.yml
@@ -9,8 +9,9 @@ jobs:
     strategy:
       matrix:
         dir:
-          - packages/next
           - packages/react
+          - packages/contentful
+          - packages/next
           - packages/sanity-next
 
     steps:
diff --git a/README.md b/README.md
index d4c69e8..0a700a9 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,7 @@
 A monorepo hosting components for rendering image and video in a single container for easy rendering of visual elements.
 
 - [@react-visual/react](./packages/react) - Vanilla implementation.
+- [@react-visual/contentful](./packages/contentful) - Adapter for Contentful assets.
 - [@react-visual/next](./packages/next) - Uses the `next/image` component for rendering images.
 - [@react-visual/sanity-next](./packages/sanity-next) - Takes Sanity asset and passes them to `@react-visual/next` for rendering.
 
@@ -34,6 +35,22 @@ export default function ResponsiveExample() {
 
 [View CodeSandbox demo](https://codesandbox.io/p/sandbox/react-visual-react-demo-w4sh62)
 
+### @react-visual/contentful
+
+Using with a Visual entryType containing image and video fields:
+
+```jsx
+import Visual from '@react-visual/contentful'
+
+export default function Example() {
+  return (
+    <Visual
+      src={ entry.background }
+      sizes='100vw' />
+  )
+}
+```
+
 ### @react-visual/next
 
 Using framework adapter for Next.js:
diff --git a/packages/contentful/README.md b/packages/contentful/README.md
new file mode 100644
index 0000000..a509fb2
--- /dev/null
+++ b/packages/contentful/README.md
@@ -0,0 +1,128 @@
+# @react-visual/contentful [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w&style=flat&logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)
+
+Renders Contentful images and videos into a container.  Features:
+
+- Automatically defines a loader functions for generating srcsets
+- Supports responsive image and video assets
+
+## Install
+
+```sh
+yarn add @react-visual/contentful
+```
+
+## Usage
+
+### Asset fields
+
+```jsx
+import Visual from '@react-visual/contentful'
+
+export default function Example() {
+  return (
+    <Visual
+      image={ entry.image }
+      video={ entry.video }
+      sizes='100vw'/>
+  )
+}
+```
+
+Where `image` and `video` are asset fields defined by these GQL fragments:
+
+```gql
+fragment image on Asset {
+	title
+  description
+  fileName
+  width
+  height
+  url
+}
+
+fragment video on Asset {
+  title
+  description
+  fileName
+  url
+}
+```
+
+### Visual entryType reference
+
+This is the expected pattern for rendering responsive images and videos.
+
+```jsx
+import Visual from '@react-visual/contentful'
+
+export default function Example() {
+  return (
+    <Visual
+      src={ entry.background }
+      sizes='100vw'/>
+  )
+}
+```
+
+Where `background` is defined by this GQL fragment (this consumes the previous fragments):
+
+```gql
+fragment visual on Visual {
+	image { ...image }
+  portraitImage { ...image }
+  video { ...video }
+  portraitVideo { ...video }
+  alt
+}
+```
+
+For more examples, read [the Cypress component tests](./cypress/component).
+
+## Props
+
+### Sources
+
+| Prop | Type | Description
+| -- | -- | --
+| `image` | `object` | A Contentful image Asset.
+| `video` | `object` | A Contentful video Asset.
+| `src` | `object` | An object with keys of responsive keys.  See examples above.
+
+### Layout
+
+| Prop | Type | Description
+| -- | -- | --
+| `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning.
+| `aspect` | `number` | Force the Visual to a specific aspect ratio. If empty, this will be set using width and height fields from Contentful queries.
+| `width` | `number`, `string` | A CSS dimension value or a px number.
+| `height` | `number`, `string` | A CSS dimension value or a px number.
+| `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets.  Defaults to `cover`.
+| `position` | `string` | An [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) value.
+
+### Loading
+
+| Prop | Type | Description
+| -- | -- | --
+| `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load.
+| `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop.
+| `imageLoader` | `Function` | This is passed through [to `next/image`'s `loader` prop](https://nextjs.org/docs/app/api-reference/components/image#loader).
+
+### Video
+
+| Prop | Type | Description
+| -- | -- | --
+| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag.  You can set it to `true` to pause a playing video or set it to `false` to play a paused video.
+
+
+### Accessibility
+
+| Prop | Type | Description
+| -- | -- | --
+| `alt` | `string` | Sets the  alt attribute or aria-label value, depending on asset type.
+
+### Theming
+
+| Prop | Type | Description
+| -- | -- | --
+| `className` | `string` | Add a custom CSS class.
+| `style` | `CSSProperties` | Add additional styles.
diff --git a/packages/contentful/cypress.config.ts b/packages/contentful/cypress.config.ts
new file mode 100644
index 0000000..27593d4
--- /dev/null
+++ b/packages/contentful/cypress.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  viewportWidth: 500,
+  viewportHeight: 500,
+  component: {
+    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx}",
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
+});
diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
new file mode 100644
index 0000000..c548a61
--- /dev/null
+++ b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
@@ -0,0 +1,116 @@
+import ContentfulVisual from '../../src'
+import {
+  imageAsset,
+  portraitImageAsset,
+  videoAsset,
+  portraitVideoAsset
+} from '../fixtures/assets'
+import { visualEntry } from '../fixtures/entries'
+
+// Dimensions
+const VW = Cypress.config('viewportWidth'),
+  VH = Cypress.config('viewportHeight'),
+  landscapeAspect = imageAsset.width / imageAsset.height
+
+describe('no asset', () => {
+
+  it('renders nothing', () => {
+    cy.mount(<ContentfulVisual
+      width={300}
+      height={200}
+      alt=''
+      data-cy='next-visual' />)
+    cy.get('[data-cy=next-visual]').should('not.exist')
+  })
+
+})
+
+describe('contentful asset props', () => {
+
+  it('renders image', () => {
+    cy.mount(<ContentfulVisual image={ imageAsset } />)
+    cy.get('img')
+      .hasDimensions(VW, VW / landscapeAspect)
+      .invoke('attr', 'alt').should('eq', imageAsset.title)
+    cy.get('img').its('[0].currentSrc').should('contain', 'w=640') // srcset
+  })
+
+  it('can override inferred props', () => {
+    cy.mount(<ContentfulVisual
+      image={ imageAsset }
+      aspect={ 1 }
+      alt='Override' />)
+    cy.get('img')
+      .hasDimensions(VW, VW)
+      .invoke('attr', 'alt').should('eq', 'Override')
+  })
+
+  it('renders video', () => {
+    cy.mount(<ContentfulVisual video={ videoAsset } aspect={ 16/9 } />)
+    cy.get('video')
+      .hasDimensions(VW, VW / (16/9) )
+      .invoke('attr', 'aria-label').should('eq', videoAsset.description)
+  })
+
+})
+
+describe('contentful visual entry props', () => {
+
+  it('renders responsive images', () => {
+    cy.mount(<ContentfulVisual src={{
+      ...visualEntry,
+      video: null,
+      portraitVideo: null,
+    }} />)
+
+    // Portrait asset
+    cy.get('img').hasDimensions(VW, VW)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', 'w=640')
+      .should('contain', portraitImageAsset.url)
+
+    // Landscape asset
+    cy.viewport(500, 400)
+    cy.get('img').hasDimensions(VW, VW / landscapeAspect)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', 'w=640')
+      .should('contain', imageAsset.url)
+  })
+
+  it('renders responsive videos', () => {
+    cy.mount(<ContentfulVisual expand src={{
+      ...visualEntry,
+      image: null,
+      portraitImage: null,
+    }} />)
+
+    // Portrait asset
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', portraitVideoAsset.url)
+
+    // Landscape asset
+    cy.viewport(500, 400)
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', videoAsset.url)
+  })
+
+  it('renders full visual entry', () => {
+    cy.mount(<ContentfulVisual src={visualEntry} />)
+
+    // Portrait asset
+    cy.get('img').hasDimensions(VW, VW)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', portraitImageAsset.url)
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', portraitVideoAsset.url)
+
+    // Landscape asset
+    cy.viewport(500, 400)
+    cy.get('img').hasDimensions(VW, VW / landscapeAspect)
+    cy.get('img').its('[0].currentSrc')
+      .should('contain', imageAsset.url)
+    cy.get('video').its('[0].currentSrc')
+      .should('contain', videoAsset.url)
+  })
+
+})
diff --git a/packages/contentful/cypress/fixtures/assets.ts b/packages/contentful/cypress/fixtures/assets.ts
new file mode 100644
index 0000000..312d287
--- /dev/null
+++ b/packages/contentful/cypress/fixtures/assets.ts
@@ -0,0 +1,31 @@
+export const imageAsset = {
+  title: "Landscape gradient",
+  description: "",
+  fileName: "landscape.png",
+  width: 1280,
+  height: 720,
+  url: "https://images.ctfassets.net/x9fe3hhqauxm/6WN8Zz47zmXelBLDenfteO/7e87ed7484738fd97fd86ac67f6feed5/tumblr_n8xc9t24W31tf8vylo1_1280.png"
+}
+
+export const portraitImageAsset = {
+  title: "Square gradient",
+  description: null,
+  fileName: "square.png",
+  width: 1280,
+  height: 1280,
+  url: "https://images.ctfassets.net/x9fe3hhqauxm/1lsKAmirOYNDVu0bfCfQ2H/32da927183924f22c535a74a10512817/tumblr_n8z97bAEMU1tf8vylo1_1280.png"
+}
+
+export const videoAsset = {
+  title: "Background Loop",
+  description: "Background loop description",
+  fileName: "Backround_Loop.mp4",
+  url: "https://videos.ctfassets.net/x9fe3hhqauxm/3TMXSh7C5nR1lUOeUygMou/15eccf4eaddcf1289c5b2b9ca83c90c4/PANDORA_ANIMATION_5.mp4"
+}
+
+export const portraitVideoAsset = {
+  title: "Portrait Loop",
+  description: "",
+  fileName: "Portait_Loop.mp4",
+  url: "https://videos.ctfassets.net/x9fe3hhqauxm/2mveMy2NaxbwfIp6ABl8xc/641f890eb10a329766d52d4805d404b4/PANDORA_ANIMATION_4.mp4"
+}
diff --git a/packages/contentful/cypress/fixtures/entries.ts b/packages/contentful/cypress/fixtures/entries.ts
new file mode 100644
index 0000000..7e0cb11
--- /dev/null
+++ b/packages/contentful/cypress/fixtures/entries.ts
@@ -0,0 +1,14 @@
+import {
+  imageAsset,
+  portraitImageAsset,
+  videoAsset,
+  portraitVideoAsset
+} from './assets'
+
+export const visualEntry = {
+  image: imageAsset,
+  portraitImage: portraitImageAsset,
+  video: videoAsset,
+  portraitVideo: portraitVideoAsset,
+  alt: 'Description',
+}
diff --git a/packages/contentful/cypress/support/commands.ts b/packages/contentful/cypress/support/commands.ts
new file mode 100644
index 0000000..ef1fb09
--- /dev/null
+++ b/packages/contentful/cypress/support/commands.ts
@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+
+// Asset that el has dimensions
+Cypress.Commands.add('hasDimensions',
+  { prevSubject: true },
+  (subject, width, height) => {
+  cy.wrap(subject).invoke('width').should('equal', width)
+  cy.wrap(subject).invoke('height').should('equal', height)
+  cy.wrap(subject)
+})
+
+// Check that a video is playing
+// https://glebbahmutov.com/blog/test-video-play/
+Cypress.Commands.add('isPlaying',
+  { prevSubject: true },
+  (subject) => {
+  cy.wrap(subject).should('have.prop', 'paused', false)
+  cy.wrap(subject)
+})
+
+// Add Typescript support for custom commaands
+// https://docs.cypress.io/guides/tooling/typescript-support#Types-for-Custom-Commands
+export {};
+declare global {
+  namespace Cypress {
+    interface Chainable {
+
+      hasDimensions(
+        width: number,
+        height: number
+      ): Chainable<void>
+
+      isPlaying(): Chainable<void>
+    }
+  }
+}
+
+
diff --git a/packages/contentful/cypress/support/component-index.html b/packages/contentful/cypress/support/component-index.html
new file mode 100644
index 0000000..e9a4010
--- /dev/null
+++ b/packages/contentful/cypress/support/component-index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/packages/contentful/cypress/support/component.ts b/packages/contentful/cypress/support/component.ts
new file mode 100644
index 0000000..41b935d
--- /dev/null
+++ b/packages/contentful/cypress/support/component.ts
@@ -0,0 +1,21 @@
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
diff --git a/packages/contentful/cypress/tsconfig.json b/packages/contentful/cypress/tsconfig.json
new file mode 100644
index 0000000..537c251
--- /dev/null
+++ b/packages/contentful/cypress/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "jsx": "preserve",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
diff --git a/packages/contentful/package.json b/packages/contentful/package.json
new file mode 100644
index 0000000..c49979f
--- /dev/null
+++ b/packages/contentful/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@react-visual/contentful",
+  "version": "0.7.1",
+  "description": "Image and video renderer for Contentful assets.",
+  "author": "Bukwild <info@bukwild.com>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "rm -rf dist/* && tsc",
+    "test": "cypress run --component"
+  },
+  "dependencies": {
+    "@react-visual/react": "^0.7.1"
+  },
+  "peerDependencies": {
+    "react": "^18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "cypress": "^12.17.3",
+    "react": "^18",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/contentful/src/ContentfulVisual.tsx b/packages/contentful/src/ContentfulVisual.tsx
new file mode 100644
index 0000000..b04f9f0
--- /dev/null
+++ b/packages/contentful/src/ContentfulVisual.tsx
@@ -0,0 +1,67 @@
+import type { ReactElement } from 'react'
+import ReactVisual from '@react-visual/react'
+import { ContentfulAsset, ContentfulVisualProps } from './types/contentfulVisualTypes'
+import {
+  contentfulModernFormats,
+  defaultImageLoader,
+  defaultVideoLoader
+} from './lib/urlBuilding'
+import {
+  orientationMediaQueries,
+  getImageAspect,
+  responsiveAspectCalculator,
+  hasResponsiveAssets,
+  hasResponsiveAspects
+} from './lib/aspectRatio'
+
+// Render a Visual using Contentful data
+export default function ContentfulVisual(
+  props: ContentfulVisualProps
+): ReactElement | null {
+
+  // Destructure some props
+  const {
+    image,
+    video,
+    src,
+    aspect,
+    imageLoader,
+    videoLoader,
+    sourceTypes,
+    sourceMedia,
+    alt,
+  } = props
+
+  // Make a Visual instance
+  return (
+    <ReactVisual
+
+      // Passthrough most props
+      {...props}
+
+      // Props that have calculated fallbaks
+      image={ image || src }
+      video={ video || src }
+      imageLoader={ imageLoader || defaultImageLoader }
+      videoLoader={ videoLoader || defaultVideoLoader }
+      sourceTypes={ sourceTypes || contentfulModernFormats }
+      sourceMedia={ sourceMedia || (
+        hasResponsiveAssets(src) ?
+          orientationMediaQueries :
+          undefined
+      )}
+      aspect={ aspect || (
+        hasResponsiveAspects(src) ?
+          responsiveAspectCalculator :
+          getImageAspect(image || src?.image || src?.portraitImage)
+      )}
+      alt={ alt || src?.alt || makeAssetAlt(image) || makeAssetAlt(video)}
+    />
+  )
+}
+
+// Use various asset fields to make the alt from automatically
+function makeAssetAlt(asset: ContentfulAsset | undefined): string {
+  if (!asset) return ''
+  return asset.description || asset.title || asset.fileName || ''
+}
diff --git a/packages/contentful/src/index.ts b/packages/contentful/src/index.ts
new file mode 100644
index 0000000..1023148
--- /dev/null
+++ b/packages/contentful/src/index.ts
@@ -0,0 +1,9 @@
+import ContentfulVisual from './ContentfulVisual'
+
+export default ContentfulVisual
+export {
+  ContentfulVisualProps,
+  ContentfulImageAsset,
+  ContentfulAsset,
+  ContentfulVisualEntry,
+} from './types/contentfulVisualTypes'
diff --git a/packages/contentful/src/lib/aspectRatio.ts b/packages/contentful/src/lib/aspectRatio.ts
new file mode 100644
index 0000000..04ea95f
--- /dev/null
+++ b/packages/contentful/src/lib/aspectRatio.ts
@@ -0,0 +1,49 @@
+import type { ContentfulImageAsset, ContentfulVisualEntry } from '../types/contentfulVisualTypes'
+import type { AspectCalculator } from '@react-visual/react'
+
+// The media queries that are used for default responsive visuals
+export const orientationMediaQueries = [
+  '(orientation:landscape)',
+  '(orientation:portrait)',
+]
+
+// Get the aspect ratio from an image asset if it exists
+export function getImageAspect(
+  image: ContentfulImageAsset | undefined
+): number | undefined {
+  if (!image) return undefined
+  return image.width / image.height
+}
+
+// Make the aspect ratio for responsive assets.
+export const responsiveAspectCalculator: AspectCalculator = (
+  { media, image: src }
+) => {
+  if (media?.includes('portrait')) {
+    return src.portraitImage.width / src.portraitImage.height as number
+  } else {
+    return src.image.width / src.image.height as number
+  }
+}
+
+// Check whether multiple orientations were provided
+export function hasResponsiveAssets(
+  src: ContentfulVisualEntry | undefined
+): boolean {
+  if (!src) return false
+  const hasLandscape = !!(src.image || src.video),
+    hasPortrait = !!(src.portraitImage || src.portraitVideo)
+  return hasLandscape && hasPortrait
+}
+
+// Check whether multiple aspect ratios were provided
+export function hasResponsiveAspects(
+  src: ContentfulVisualEntry | undefined
+): boolean {
+  if (!src) return false
+  const hasLandscapeAspect = !!(src.image?.width &&
+      src.image?.height),
+    hasPortraitAspect = !!(src.portraitImage?.width &&
+      src.portraitImage?.height)
+  return hasLandscapeAspect && hasPortraitAspect
+}
diff --git a/packages/contentful/src/lib/urlBuilding.ts b/packages/contentful/src/lib/urlBuilding.ts
new file mode 100644
index 0000000..cc7d668
--- /dev/null
+++ b/packages/contentful/src/lib/urlBuilding.ts
@@ -0,0 +1,32 @@
+import type { ImageLoader, VideoLoader } from '@react-visual/react'
+
+// The types that Contentful's CDN can produce
+export const contentfulModernFormats = ['image/avif', 'image/webp']
+
+// Produce Contentful image URls
+export const defaultImageLoader: ImageLoader = ({
+  src, width, type, media
+}) => {
+
+  // Use portrait image if it exists, otherwise fallback to landscape
+  const url = media?.includes('portrait') && src.portraitImage ?
+    src.portraitImage.url :
+    src.image?.url || src.url
+
+  // Make Contentful resizing instructions
+  const query = new URLSearchParams({ w: String(width) })
+
+  // Optionally set the format
+  if (type?.includes('avif')) query.set('fm', 'avif')
+  else if (type?.includes('webp')) query.set('fm', 'webp')
+
+  // Make the query with formatting instructions
+  return `${url}?${query}`
+}
+
+// Use portrait video from `src` prop or fallback to url
+export const defaultVideoLoader: VideoLoader = ({ src, media }) => {
+  return media?.includes('portrait') && src.portraitVideo ?
+    src.portraitVideo.url :
+    src.video?.url || src.url
+}
diff --git a/packages/contentful/src/types/contentfulVisualTypes.ts b/packages/contentful/src/types/contentfulVisualTypes.ts
new file mode 100644
index 0000000..38361ed
--- /dev/null
+++ b/packages/contentful/src/types/contentfulVisualTypes.ts
@@ -0,0 +1,28 @@
+import type { ReactVisualProps } from '@react-visual/react'
+
+export type ContentfulVisualProps = {
+  image?: ContentfulImageAsset
+  video?: ContentfulAsset
+  src?: ContentfulVisualEntry
+  alt?: string // Can be inferrerd
+} & Omit< ReactVisualProps, 'alt' | 'image' | 'video' >
+
+export type ContentfulImageAsset = ContentfulAsset & {
+  width: number
+  height: number
+}
+
+export type ContentfulAsset = {
+  title?: string
+  description?: string
+  fileName?: string
+  url: string
+}
+
+export type ContentfulVisualEntry = {
+  image?: ContentfulImageAsset
+  portraitImage?: ContentfulImageAsset
+  video?: ContentfulAsset
+  portraitVideo?: ContentfulAsset
+  alt: string
+}
diff --git a/packages/contentful/tsconfig.json b/packages/contentful/tsconfig.json
new file mode 100644
index 0000000..009925e
--- /dev/null
+++ b/packages/contentful/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist/"
+  },
+  "include": [ "src" ]
+}
diff --git a/packages/react/README.md b/packages/react/README.md
index 53f9ea4..0e7186d 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -194,6 +194,7 @@ For more examples, read [the Cypress component tests](./cypress/component).
 | `sourceTypes` | `string[]` | Specify image MIME types that will be passed to the `imageLoader` and used to create additional `<source>` tags.  Use this to create `webp` or `avif` sources with a CDN like Contentful.
 | `sourceMedia` | `string[]` | Specify media queries that will be passed to the `imageLoader` and used to create additional `<source>` tags.
 | `imageLoader` | `Function` | Uses syntax that is similar [to `next/image`'s `loader` prop](https://nextjs.org/docs/app/api-reference/components/image#loader).  A srcset is built with a hardcoded list of widths.
+| `videoLoader` | `Function` | Like `imageLoader` but is only passed the `src` and `media` properties.
 
 ### Video
 
diff --git a/packages/react/src/ReactVisual.tsx b/packages/react/src/ReactVisual.tsx
index 3247881..6ad2451 100644
--- a/packages/react/src/ReactVisual.tsx
+++ b/packages/react/src/ReactVisual.tsx
@@ -63,9 +63,9 @@ export default function ReactVisual(
         sourceTypes,
         sourceMedia,
         style: { // Expand to wrapper when wrapper has layout
-          ...(aspect || expand ? fillStyles : undefined),
           width: width ? '100%': undefined,
           height: height ? '100%' : undefined,
+          ...(aspect || expand ? fillStyles : undefined),
         }
       }} /> }
 
diff --git a/packages/react/src/VisualWrapper.tsx b/packages/react/src/VisualWrapper.tsx
index d3d50e9..eb24adc 100644
--- a/packages/react/src/VisualWrapper.tsx
+++ b/packages/react/src/VisualWrapper.tsx
@@ -20,7 +20,7 @@ export default function VisualWrapper({
 
   // If aspect is a function, invoke it to determine the aspect ratio
   let aspectRatio, aspectStyleTag, aspectClasses
-  if (typeof aspect == 'function' && sourceMedia?.length) {
+  if (typeof aspect == 'function' && sourceMedia && sourceMedia.length) {
     ({ aspectStyleTag, aspectClasses } = makeResponsiveAspects({
       aspectCalculator: aspect,
       sourceMedia, image, video
@@ -61,13 +61,17 @@ function makeResponsiveAspects({
   // aspect value.
   const styles = sourceMedia.map(mediaQuery => {
 
-    // Calculate the asepct for this query state
+    // Calculate the aspect for this query state
     const aspect = aspectCalculator({ media: mediaQuery, image, video })
 
     // Make a CSS class name from the media query string
     const mediaClass = mediaQuery
       .replace(/[^\w]/ig, '-') // Replace special chars with "-"
-    const cssClass = `rv-${mediaClass}-${aspect}`
+    const aspectClass = aspect
+      .toFixed(3)
+      .replace(/\./ig, '_') // Replace decimals
+      .replace(/_?0*$/, '') // Remove trailing 0s
+    const cssClass = `rv-${mediaClass}-${aspectClass}`
       .replace(/\-{2,}/g, '-') // Reduce multiples of `-`
 
     // Make the CSS rule
@@ -76,7 +80,7 @@ function makeResponsiveAspects({
         aspect-ratio: ${aspect};
       }
     }`
-    return { cssClass, cssRule}
+    return { cssClass, cssRule }
   })
 
   // Make an array of the classes to add
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 9b03302..5329140 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -8,5 +8,8 @@ export { LazyVideo, VisualWrapper, collectDataAttributes }
 export {
   ReactVisualProps,
   ObjectFit,
-  ObjectFitOption
+  ObjectFitOption,
+  AspectCalculator,
+  ImageLoader,
+  VideoLoader,
 } from './types/reactVisualTypes'