Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik

Created by

Avara Site in Framer
Avara Site in Framer
Avara Site in Framer

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.

avara site component set

Components created for the Avara site recreation.

avara site component set

Components created for the Avara site recreation.

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

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation