Vue animation example
Vue Parallax: Starfield Hero With Depth
Space scenes are a natural fit for parallax because depth is the whole point. Distant stars barely move, closer stars move more, the planet drifts in between and the rocket in front tilts toward the pointer. It also reads a scroll input, so it can be wired to your page scroll for a scroll-driven hero.
- 4.4 KB file
- 5 live inputs
- Vue runtime
How this starfield parallax hero works
- Stars are split into three depth bands, each moved by its depth times the pointer and scroll offsets.
- The rocket rotates toward the horizontal pointer offset, which makes it feel steerable.
- The scroll input (0 to 1) shifts every layer vertically by its depth.
Add it to your Vue app
Install exodeui-vue, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
<script setup>
import { ExodeUICanvas } from 'exodeui-vue';
</script>
<template>
<ExodeUICanvas
src="/vue-parallax.exode"
fit="Layout"
style="width: 100%; height: 520px"
/>
</template>Inputs
| Input | Type | Default | Range |
|---|---|---|---|
scroll | Number | 0 | 0 – 1 |
headline | Text | Launch faster | — |
accent | Text | #42b883 | hex colour |
accent2 | Text | #35495e | hex colour |
bg | Text | #050712 | hex colour |
More Vue animations
Bouncing Dots SpinnerThree dots bouncing with real gravity, squashing on landing, with shadows that shrink as they rise.Slide and Fade Route TransitionDirection-aware route transitions: pages slide and fade toward the tab you chose, with a sliding indicator.Odometer CounterAn odometer counter whose digits roll independently on springs to each new value.
The same idea in other frameworks: React depth parallax scene · React layered wave background · Flutter parallax scroll list