Darth-Knoppix

{
  "core": { "black": "#000", "white": "#fff" },
  "amber": {
    "100": "#fef3c7",
    "200": "#fde68a",
    "300": "#fcd34d",
    "400": "#fbbf24",
    "50": "#fffbeb",
    "500": "#f59e0b",
    "600": "#d97706",

Darth-Knoppix

const TIME_TO_BREW = 500 // ms

// Make an espresso, promise to give it back when it's done
function coffeeMachine(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id % 2 === 0) {
        resolve(id + ": espresso")
      } else {
        reject(id + ": terrible espresso")

Darth-Knoppix

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

/*
Attempt at getting gradients to work in Framer, using an override doesn't work as expected due to the output differing.
This is a workaround until this is added to Framer directly
*/

export function GradientText({ text, height }) {
    return (

Darth-Knoppix

<motion.h1
  initial={{ scale: 0.8, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  className="title has-text-weight-bold is-1 is-size-2-mobile is-spaced"
  layoutId="title"
>

Darth-Knoppix

<motion.p
  className="subtitle"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ delay: 0.2 }}
>

Darth-Knoppix

<motion.figure className="image" layoutId="image">
  <Image src="/assets/task.png" layout="responsive" width={780} height={501} />
</motion.figure>

Darth-Knoppix

<motion.h1
  className="title has-text-weight-bold is-1 is-size-2-mobile is-spaced"
  layoutId="title"
>
  The only Todo App you'll ever need
</motion.h1>

Darth-Knoppix

<h1 className="title has-text-weight-bold is-1 is-size-2-mobile is-spaced">
  The only Todo App you'll ever need
</h1>

Darth-Knoppix

import "../styles/theme.sass"
import "@fortawesome/fontawesome-free/css/all.css"
import { AnimateSharedLayout } from "framer-motion"
function MyApp({ Component, pageProps }) {
  return (
    <AnimateSharedLayout>
      <Component {...pageProps} />
    </AnimateSharedLayout>
  )
}

Darth-Knoppix

.expanded {
  width: 10rem;
  height: 10rem;
  background-color: navy;
  position: relative;
  left: -100%;
  top: 150%;
}

.compact {