protomuse

outrageaudio / gist:9222b7ffd7221dcf2e307c9c06405fd2

Created October 19, 2023 06:50

Framer Code Component MP3 Player With Waveform (no Wavesurfer.js)

	import * as React from "react"
	import { Frame, addPropertyControls, ControlType } from "framer"

	export function SamplePlayer(props) {
	const canvasRef = React.useRef(null)
	const [isPlaying, setIsPlaying] = React.useState(false)
	const audioRef = React.useRef(new Audio(props.audioFile))

	React.useEffect(() => {
	if (props.audioFile) {

maxsteenbergen / framerapp.webmanifest

Last active April 17, 2024 17:16

How to enable fullscreen prototype previews with Framer (Sites)

	{
	"name": "Framer Fullscreen Prototype",
	"short_name": "Framer",
	"description": "A fullscreen Framer prototype as PWA",
	"start_url": "https://fullscreen-prototype.framer.website",
	"scope": "https://fullscreen-prototype.framer.website",
	"display": "fullscreen",
	"orientation": "any",
	"theme_color": "#ffffff",
	"background_color": "#ffffff",

perrysmotors / ScrollEffects.tsx

Last active June 20, 2024 21:07

Overrides to create scroll interactions on Framer sites

	import type { ComponentType } from "react"
	import { useState, useEffect } from "react"

	import type { MotionValue, Transition } from "framer-motion"
	import {
	useScroll,
	useVelocity,
	useTransform,
	useMotionValue,
	animate,

netgfx / modalOpener.tsx

Created September 23, 2021 05:27

Modal opener

	import { addPropertyControls, ControlType } from "framer"
	import { motion } from "framer-motion"
	import { useEffect } from "react"
	import { globalStore } from "./globals.ts"

	// Learn more: https://www.framer.com/docs/guides/code-components/

	export default function ModalOpener(props) {
	const { onEvent, propertyListener, requireAuth, style } = props
	const [store, setStore] = globalStore()