> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Rive is where designers, animators, and developers build interactive experiences. Design, animate, and code in one place. What you build in the editor is what ships in your app, game, or website. No mockups, no prototypes, no handoff. The real thing.

export const CardGroupCustom = ({children}) => {
  return <div className="
        prose
        dark:prose-invert
        grid
        max-w-none
        gap-4
        grid-cols-2
        md:grid-cols-3
        columns
        card-group
        dark:prose-dark
        gap-y-0
      " style={{
    "--cols": 3
  }}>

      {children}
    </div>;
};

export const RiveCard = ({title, description, links, children, source, aspect3by2}) => {
  const runtimesInOrder = ['web', 'react', 'reactNative', 'flutter', 'apple', 'android', 'unity', 'unreal'];
  const runtimeTitles = {
    web: 'Web',
    react: 'React',
    reactNative: "React Native",
    flutter: 'Flutter',
    apple: 'Apple',
    android: 'Android',
    unity: 'Unity',
    unreal: 'Unreal'
  };
  const hasContent = title || description || links;
  const RuntimeLink = ({link, runtime}) => {
    if (!link) return null;
    return <a href={link} target="_blank" className="cursor-pointer border border-neutral-600 hover:border-white rounded-[4px] text-14 py-1 px-5 mr-[10px] mb-[10px]">
        {runtimeTitles[runtime]}
      </a>;
  };
  return <div className="flex flex-col card block font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full">

      {aspect3by2 ? <div className={`w-full h-0 relative pb-[66%]`}>
            <div className="absolute inset-0">
              {children}
            </div>
          </div> : <div className={`w-full h-0 relative pb-[75%]`}>
            <div className="absolute inset-0">
              {children}
            </div>
          </div>}

      {hasContent && <div className="flex flex-grow flex-col px-6 py-5 relative" data-component-part="card-content-container">
            <div className="flex flex-col grow">
              <h2 className="not-prose font-semibold text-base text-gray-800 dark:text-white" data-component-part="card-title">{title}</h2>
              <div className="flex flex-col grow prose mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400" data-component-part="card-content">
                <div className="grow flex flex-col">
                  <p>{description}</p>
                  {source && source.length > 0 && <p className="mt-3">
                        {source.map((item, index) => {
    if (source.length == 1) {
      return <>Open the <a href={item}>Rive file</a>.</>;
    }
    if (index == 0) {
      return <>Open <a href={item}>Rive file 1</a></>;
    }
    return <>, <a href={item}>file {index + 1}</a></>;
  })}
                      </p>}
                </div>
                <div className="mt-6 flex flex-wrap">
                  {links && runtimesInOrder.map(currentRuntime => {
    return <RuntimeLink key={currentRuntime} runtime={currentRuntime} link={links[currentRuntime]} />;
  })}
                </div>
              </div>
            </div>
          </div>}
    </div>;
};

export const VideoEmbed = ({src}) => {
  return <div style={{
    width: "100%",
    height: "100%",
    overflow: "hidden"
  }}>

      <video src={src} autoPlay loop muted playsInline style={{
    width: "100%",
    height: "100%",
    borderRadius: 0,
    margin: 0,
    display: "block",
    objectFit: "cover",
    backgroundColor: "transparent"
  }} />
    </div>;
};

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

<CardGroupCustom>
  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/web-apps.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/figma_rive.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/product_ui2.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/broadcast.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/automotive.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/joel_home.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/video.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/game-ui.mp4" />
  </RiveCard>

  <RiveCard>
    <VideoEmbed src="https://static.rive.app/video/territory_sequence.mp4" />
  </RiveCard>
</CardGroupCustom>

## Rive at a Glance

<CardGroup cols="2">
  <Card title="1. Design" img="https://mintcdn.com/rive/4qNdHak9r8tQOwbs/images/introduction/design.png?fit=max&auto=format&n=4qNdHak9r8tQOwbs&q=85&s=d5015cd3aaa888b9c488761eadcf6a53" href="/editor/fundamentals/artboards" width="499" height="331" data-path="images/introduction/design.png">
    Create vector graphics, responsive layouts, and reusable components, or import images, audio, fonts, and other assets from your favorite design tools.
  </Card>

  <Card title="2. Animate" img="https://mintcdn.com/rive/4qNdHak9r8tQOwbs/images/introduction/animation.gif?s=5aa30d970c6006f50e4f82bd5da793cf" href="/editor/animate-mode/animate-mode-overview" width="300" height="200" data-path="images/introduction/animation.gif">
    Bring your designs to life with timelines, keyframes, and smooth interpolation.
  </Card>

  <Card title="3. Make Interactive" img="https://mintcdn.com/rive/4qNdHak9r8tQOwbs/images/introduction/state-machine.gif?s=5e686085de2098bdbd00a4231809eb33" href="/editor/state-machine/state-machine" width="300" height="200" data-path="images/introduction/state-machine.gif">
    Build interactive experiences that respond to user input, screen size, scrolling, and application state.
  </Card>

  <Card title="4. Control using Data" img="https://mintcdn.com/rive/4qNdHak9r8tQOwbs/images/introduction/data-binding.gif?s=05b5202677b09009641b60587ea10d2e" href="/editor/data-binding/overview" width="300" height="200" data-path="images/introduction/data-binding.gif">
    Connect animations, text, colors, layouts, and other properties to real-time data.
  </Card>

  <Card title="5. Scripting" img="https://mintcdn.com/rive/4qNdHak9r8tQOwbs/images/introduction/scripting.gif?s=620427c55fd4acc92787775b8d427b3b" href="/scripting/getting-started" width="300" height="200" data-path="images/introduction/scripting.gif">
    Use scripting to create custom interactions, procedural animation, and behaviors that go beyond the built-in tools.
  </Card>

  <Card title="6. Publish Anywhere" img="https://mintcdn.com/rive/4qNdHak9r8tQOwbs/images/introduction/publish.gif?s=fac6e08e010c416d606466b11a99dfe3" href="/runtimes/getting-started" width="300" height="200" data-path="images/introduction/publish.gif">
    Export once and use your interactive graphics across websites, mobile apps, games, videos, and more.
  </Card>
</CardGroup>

## Quick Start

New to Rive? This step-by-step quickstart walks through the core concepts of the editor while building a complete interactive project from start to finish.

<YouTube id="wnwA0izJo4E" />
