Project Glow

[cfurlong15]

Going into building this weather app, I felt like most of the appeal had to come from the visual aspect of it. While I am proud of the functionality and the app's overall ability to render accurate weather information, this was my first attempt at an animated background for an app. This meant I had to find and incorporate some sort of looped video, host it somewhere, and effectively have it render as a backdrop for my pages without any loss in quality. I tried something new, which was importing "@vimeo/player" and creating one unique component just to render the background. With a useEffect, an if statement, and a handful of attempts at styling, I was able to create the Background component and import it into App.jsx . See code below for specific details:

import React, { useEffect, useRef } from "react"; import "./Background.css"; import Vimeo from "@vimeo/player";

function Background() { const videoRef = useRef(null);

useEffect(() => { const options = { id: 896971507, autoplay: true, loop: true, muted: true, background: true, width: 1920, height: 1080, };

if (videoRef.current) {
  const player = new Vimeo(videoRef.current, options);
  player.setPlaybackRate(0.65);
}

}, []);

return (

); }

export default Background;

[drewkybrown]

Shoutouts

The use of the Vimeo player for an animated background is super creative and visually captivating. I love this feature!!

Optimization

Exploring ways to optimize the video playback for various screen sizes and network speeds could further elevate the App's performance.

Introducing user controls for the background video like play/pause, could be an idea.

Customization

Providing options for different background themes could be a cool feature for users.