# Call to action

> Grow a call-to-action banner into place on scroll after a short delay. Try it live, then copy the code for React, Vue, Astro or plain JavaScript.

A banner grows into place after a short delay, so it gets attention after the content above it.

* React

  ```jsx
  import { Reveal } from "@awesome-reveal/react";
  import { scale, spring } from "@awesome-reveal/react/keyframes";

  export function CallToAction() {
    return (
      <Reveal
        as="section"
        className="cta"
        keyframes={scale({ from: 0.9, easing: spring() })}
        delay={200}
      >
        <h2>Ready to start?</h2>
        <p>Install the package for your framework.</p>
        <a href="/getting-started/">Get started</a>
      </Reveal>
    );
  }
  ```

* Vue

  ```vue
  <script setup>
  import { Reveal } from "@awesome-reveal/vue";
  import { scale, spring } from "@awesome-reveal/vue/keyframes";
  </script>

  <template>
    <Reveal
      as="section"
      class="cta"
      :keyframes="scale({ from: 0.9, easing: spring() })"
      :delay="200"
    >
      <h2>Ready to start?</h2>
      <p>Install the package for your framework.</p>
      <a href="/getting-started/">Get started</a>
    </Reveal>
  </template>
  ```

* Astro

  ```astro
  ---
  import { Reveal } from "@awesome-reveal/astro";
  import { scale, spring } from "@awesome-reveal/astro/keyframes";
  ---

  <Reveal
    as="section"
    class="cta"
    keyframes={scale({ from: 0.9, easing: spring() })}
    delay={200}
  >
    <h2>Ready to start?</h2>
    <p>Install the package for your framework.</p>
    <a href="/getting-started/">Get started</a>
  </Reveal>
  ```

* JavaScript

  ```html
  <section class="cta">
    <h2>Ready to start?</h2>
    <p>Install the package for your framework.</p>
    <a href="/getting-started/">Get started</a>
  </section>
  ```

  ```js
  import { reveal } from "@awesome-reveal/core";
  import { scale, spring } from "@awesome-reveal/core/keyframes";

  reveal(document.querySelector(".cta"), {
    keyframes: scale({ from: 0.9, easing: spring() }),
    delay: 200,
  });
  ```

## Next steps

[Options](/concepts/options/): Duration, delay, stagger and the viewport options.

[Springs](/concepts/keyframes/#springs): Make an animation overshoot and settle.

[Accessibility](/concepts/accessibility/): Reduced motion, screen readers and pages without JavaScript.

[Getting started](/getting-started/): Install the package for your framework.