supahfunk

import { useEffect } from 'react'
import { useThree } from '@react-three/fiber'
import { MathUtils } from 'three'

const isPercentage = (num) => typeof num === 'string' && num.includes('%')

const calculatePosition = (side, value, size, viewport, length) => {
  const { mapLinear } = MathUtils
  const inverse = side === 'right' || side === 'top' ? -1 : 1

supahfunk

import { useGLTF, Instances, Instance } from '@react-three/drei'
import { MathUtils } from 'three'

const InstancedMesh = () => {
	const { nodes } = useGLTF('./model.glb')

	const randomVector = (r) =>
		Array(3)
			.fill()
			.map(() => MathUtils.randFloatSpread(r))

supahfunk

uniform sampler2D textureMap; //image
uniform float amount; //amount of twirl
void main() {
   vec2 uv = gl_TexCoord[0].st-0.5;
   float angle = atan2(uv.y,uv.x);
   float radius = length(uv);
   angle+= radius*amount;
   vec2 shifted = radius*vec2(cos(angle), sin(angle));
   gl_FragColor = texture(textureMap, (shifted+0.5));
}

supahfunk

/* Vertex shader */

vNormal = normalize(vec3(world * vec4(normal, 0.0))); // Normal in model 


/* Fragment shader */

// Move normal to view space
highp vec2 muv = vec2(view * vec4(normalize(vNormal), 0))*0.5+vec2(0.5,0.5);
// read texture inverting Y value

supahfunk

import { mergeUniforms } from 'three/src/renderers/shaders/UniformsUtils.js'
import { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js'

export default {

  uniforms: mergeUniforms([
    UniformsLib.lights,
    UniformsLib.fog,
  ]),

supahfunk

/*------------------------------
Extract first frame from video
------------------------------*/
ffmpeg -i input.mov -vf "select=eq(n\,0)" -q:v 3 output.jpg

/*------------------------------
Convert video optimized for web
------------------------------*/
ffmpeg -i input.mov -c:v libx264 -preset veryslow -pix_fmt yuv420p output.mp4

supahfunk

/*------------------------------
Background Cover UV
--------------------------------
u = basic UV
s = screensize
i = image size
------------------------------*/
vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
  float rs = s.x / s.y; // Aspect screen size
  float ri = i.x / i.y; // Aspect image size

supahfunk

const getClosestDiffInArray = (length, curr, next) => {
  const inside = curr > next ? -(curr - next) : next - curr
  const outside = curr > next ? length - curr + next : -(length - next + curr)
  return Math.abs(inside) < Math.abs(outside) ? inside : outside
}

console.log('return', getClosestDiffInArray(12, 11, 2))

supahfunk

const MyComponent = ({ items }) => {
  const $items = useRef(items.map(createRef))

  useEffect(() => {
    console.log($items.current[0].current)
  }, [])

  return (
    {items.map((item, index) => (
      <div

supahfunk

const Background = () => {
  const { viewport } = useThree()
  const scale = useMemo(() => ((40 + 15) / viewport.distance), [viewport])
  const [bgTexture] = useTexture(['./bg.png'])

  const shaderArgs = useMemo(() => ({
    uniforms: {
      uTexture: { value: bgTexture },
      uResolution: { value: { x: viewport.width, y: viewport.height } },
      uImageRegsolution: { value: { x: bgTexture.image.width, y: bgTexture.image.height } },