Animation

Avara Site in Framer

This is the Avara site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

Created by

Nandi

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

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

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.

avara site component set — Components created for the Avara site recreation.

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} />
    }
}

Avara Site in Framer

About the resource

About the resource

About the resource

Code override for playing sound on click

Code override for playing sound on click

Code override for playing sound on click

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

More resources

More resources