Animation
Avara Site in Framer
Created by
About the resource
This site's rebuild exclusively utilizes native Framer features, with just a bit of coding required to play sounds when clicking certain elements. (You'll find the code override outlined separately below.)
I put together 29 components to establish all the user interactions. Oh, and the site is fully responsive; so yeah, it's all set for you to check out on mobile as well.
About the resource
This site's rebuild exclusively utilizes native Framer features, with just a bit of coding required to play sounds when clicking certain elements. (You'll find the code override outlined separately below.)
I put together 29 components to establish all the user interactions. Oh, and the site is fully responsive; so yeah, it's all set for you to check out on mobile as well.
About the resource
This site's rebuild exclusively utilizes native Framer features, with just a bit of coding required to play sounds when clicking certain elements. (You'll find the code override outlined separately below.)
I put together 29 components to establish all the user interactions. Oh, and the site is fully responsive; so yeah, it's all set for you to check out on mobile as well.
Code override for playing sound on click
You can apply this code override to elements to assign the sounds to them. Feel free to experiment with it.
Code override for playing sound on click
You can apply this code override to elements to assign the sounds to them. Feel free to experiment with it.
Code override for playing sound on click
You can apply this code override to elements to assign the sounds to them. Feel free to experiment with it.
import React, { ComponentType, useRef } from "react" const soundUrls = { click: "https://avara.xyz/sounds/click.wav", error: "https://avara.xyz/sounds/error.wav", open: "https://avara.xyz/sounds/open.wav", close: "https://avara.xyz/sounds/close.wav", forward: "https://avara.xyz/sounds/forward.wav", back: "https://avara.xyz/sounds/back.wav", } function useSound(url: string): HTMLAudioElement { const audioRef = useRef(new Audio(url)) return audioRef.current } function isTouchDevice() { return "ontouchstart" in window } export function withError(Component): ComponentType { return (props) => { const clickSound = useSound(soundUrls.click) const errorSound = useSound(soundUrls.error) const handleStart = () => clickSound.play() const handleEnd = () => errorSound.play() const events = isTouchDevice() ? { onTouchStart: handleStart, onTouchEnd: handleEnd } : { onMouseDown: handleStart, onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withFigure(Component): ComponentType { return (props) => { const clickSound = useSound(soundUrls.click) const openSound = useSound(soundUrls.open) const handleStart = () => clickSound.play() const handleEnd = () => openSound.play() const events = isTouchDevice() ? { onTouchStart: handleStart, onTouchEnd: handleEnd } : { onMouseDown: handleStart, onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withLeave(Component): ComponentType { return (props: any) => { const closeSound = useSound(soundUrls.close) const handleEnd = () => closeSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withForward(Component): ComponentType { return (props) => { const forwardSound = useSound(soundUrls.forward) const handleEnd = () => forwardSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withBack(Component): ComponentType { return (props) => { const backSound = useSound(soundUrls.back) const handleEnd = () => backSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } }
import React, { ComponentType, useRef } from "react" const soundUrls = { click: "https://avara.xyz/sounds/click.wav", error: "https://avara.xyz/sounds/error.wav", open: "https://avara.xyz/sounds/open.wav", close: "https://avara.xyz/sounds/close.wav", forward: "https://avara.xyz/sounds/forward.wav", back: "https://avara.xyz/sounds/back.wav", } function useSound(url: string): HTMLAudioElement { const audioRef = useRef(new Audio(url)) return audioRef.current } function isTouchDevice() { return "ontouchstart" in window } export function withError(Component): ComponentType { return (props) => { const clickSound = useSound(soundUrls.click) const errorSound = useSound(soundUrls.error) const handleStart = () => clickSound.play() const handleEnd = () => errorSound.play() const events = isTouchDevice() ? { onTouchStart: handleStart, onTouchEnd: handleEnd } : { onMouseDown: handleStart, onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withFigure(Component): ComponentType { return (props) => { const clickSound = useSound(soundUrls.click) const openSound = useSound(soundUrls.open) const handleStart = () => clickSound.play() const handleEnd = () => openSound.play() const events = isTouchDevice() ? { onTouchStart: handleStart, onTouchEnd: handleEnd } : { onMouseDown: handleStart, onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withLeave(Component): ComponentType { return (props: any) => { const closeSound = useSound(soundUrls.close) const handleEnd = () => closeSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withForward(Component): ComponentType { return (props) => { const forwardSound = useSound(soundUrls.forward) const handleEnd = () => forwardSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withBack(Component): ComponentType { return (props) => { const backSound = useSound(soundUrls.back) const handleEnd = () => backSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } }
import React, { ComponentType, useRef } from "react" const soundUrls = { click: "https://avara.xyz/sounds/click.wav", error: "https://avara.xyz/sounds/error.wav", open: "https://avara.xyz/sounds/open.wav", close: "https://avara.xyz/sounds/close.wav", forward: "https://avara.xyz/sounds/forward.wav", back: "https://avara.xyz/sounds/back.wav", } function useSound(url: string): HTMLAudioElement { const audioRef = useRef(new Audio(url)) return audioRef.current } function isTouchDevice() { return "ontouchstart" in window } export function withError(Component): ComponentType { return (props) => { const clickSound = useSound(soundUrls.click) const errorSound = useSound(soundUrls.error) const handleStart = () => clickSound.play() const handleEnd = () => errorSound.play() const events = isTouchDevice() ? { onTouchStart: handleStart, onTouchEnd: handleEnd } : { onMouseDown: handleStart, onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withFigure(Component): ComponentType { return (props) => { const clickSound = useSound(soundUrls.click) const openSound = useSound(soundUrls.open) const handleStart = () => clickSound.play() const handleEnd = () => openSound.play() const events = isTouchDevice() ? { onTouchStart: handleStart, onTouchEnd: handleEnd } : { onMouseDown: handleStart, onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withLeave(Component): ComponentType { return (props: any) => { const closeSound = useSound(soundUrls.close) const handleEnd = () => closeSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withForward(Component): ComponentType { return (props) => { const forwardSound = useSound(soundUrls.forward) const handleEnd = () => forwardSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } } export function withBack(Component): ComponentType { return (props) => { const backSound = useSound(soundUrls.back) const handleEnd = () => backSound.play() const events = isTouchDevice() ? { onTouchEnd: handleEnd } : { onMouseUp: handleEnd } return <Component {...props} {...events} /> } }