Skip to content

Instantly share code, notes, and snippets.

@zachj0hnston
zachj0hnston / dotgrid.js
Last active December 10, 2022 02:11
Dot Grid
import { Html } from "@react-three/drei";
import { Color, Matrix4, Vector3 } from "three";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import React, { useRef } from "react";
import { useIntersection } from "react-use";
const DisableRender = () => useFrame(() => null, 1);
interface DotGridProps {
height?: number;
@zachj0hnston
zachj0hnston / toggle.tsx
Created April 4, 2019 23:01
Framer X Toggle
import * as React from "react"
import { useState } from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import Styled from "styled-components"
// The actual function component
export function Toggle(props) {
const [enabled, setEnabled] = useState(props.isDefaultOn)
// On click, change the state which changes the class
import * as React from "react";
import { Stack, Frame, PropertyControls, ControlType } from "framer";
import { Content } from "./content";
import { FinderGridInstructions } from "./canvas";
export class FinderGrid extends React.Component<Props> {
// Set default properties
static defaultProps = {
import * as React from "react";
import { PropertyControls, ControlType } from "framer";
export class ClickOutside extends React.Component<Props> {
static defaultProps = {
width: 100,
height: 100,
}
import * as React from "react";
import { Frame, PropertyControls, Stack ControlType } from "framer";
export class Color_Blind extends React.Component {
static defaultProps = {
width: 2000,
height: 1200,
background: "white",
};
import * as React from "react";
import { Frame, PropertyControls, ControlType } from "framer";
export class Translate_Text extends React.Component {
static defaultProps = {
width: 150,
height: 30,
text: "Hello"
language: "🇺🇸",
import * as React from "react";
import { Frame, PropertyControls, ControlType } from "framer";
export class componentName extends React.Component {
static defaultProps = {
width: 1600,
height: 1200,
color: "#e0f",
@zachj0hnston
zachj0hnston / browser.tsx
Created August 15, 2018 21:34
Framer X Browser component
import * as React from "react";
import { Frame, PropertyControls, ControlType } from "framer";
import { FrameProps } from "framer/types/src/render/presentation/Frame";
export class Browser extends React.Component {
static defaultProps = {