nuc_animations

modules/index.ts

@@ -1,4 +1,5 @@
 export * from './nuc_api'
+export * from './nuc_animations'
 export * from './nuc_auth'
 export * from './nuc_charts'
 export * from './nuc_colors'

modules/nuc_animations/README.md

@@ -0,0 +1,9 @@
+# <img src="https://nucleify.io/favicon.ico" width="17" height="17" /> &nbsp; nuc_animations
+
+Module that contains animations functions.
+
+<br>
+
+<h2> &nbsp; <img src="https://nucleify.io/img/technologies/github.svg" width="25"> &nbsp; Contributors </h2> <br>
+
+<a href="https://github.com/SzymCode" target="_blank"><img src="https://nucleify.io/img/contributors/szymcode.svg" width="30" height="30" /></a>

modules/nuc_animations/_index.scss

@@ -0,0 +1 @@
+@import 'caterpillar', 'fade', 'rotate', 'shine';

modules/nuc_animations/caterpillar/_index.scss

@@ -0,0 +1,47 @@
+@import 'keyframes', 'mixins', 'properties';
+
+.caterpillar,
+%caterpillar {
+  background: transparent !important;
+  border: 0 !important;
+  outline: #ffffff30 1px solid !important;
+  backdrop-filter: blur(0.5em);
+  border-radius: 0 !important;
+  z-index: 1;
+  overflow: visible;
+  color: white !important;
+  text-decoration: none;
+
+  img {
+    position: relative;
+    top: -1px;
+    width: 20px;
+    height: 20px;
+    fill: white !important;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border: 2px solid transparent !important;
+    border-image: conic-gradient(
+        from var(--angle),
+        #10b981 0deg 80deg,
+        transparent 60deg 200deg
+      )
+      1 stretch !important;
+    animation: rotate 4s linear infinite;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    background: #ffffff09 !important;
+
+    &::before {
+      isolation: isolate;
+      opacity: 1;
+    }
+  }
+}

modules/nuc_animations/caterpillar/_keyframes.scss

@@ -0,0 +1,5 @@
+@keyframes rotate {
+  to {
+    --angle: 360deg;
+  }
+}

modules/nuc_animations/caterpillar/_mixins.scss

@@ -0,0 +1,41 @@
+@mixin caterpillar {
+  backdrop-filter: blur(0.5em);
+  border-radius: 0 !important;
+  z-index: 1;
+  overflow: visible;
+  color: white !important;
+  text-decoration: none;
+
+  img {
+    position: relative;
+    top: -1px;
+    width: 20px;
+    height: 20px;
+    fill: white !important;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border: 2px solid transparent !important;
+    border-image: conic-gradient(
+        from var(--angle),
+        #10b981 0deg 20deg,
+        transparent 20deg 200deg
+      )
+      1 stretch !important;
+    animation: rotate 4s linear infinite;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    background: #ffffff09 !important;
+
+    &::before {
+      isolation: isolate;
+      opacity: 1;
+    }
+  }
+}

modules/nuc_animations/caterpillar/_properties.scss

@@ -0,0 +1,11 @@
+@property --opacity {
+  syntax: '<number>';
+  initial-value: 0.5;
+  inherits: false;
+}
+
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}

modules/nuc_animations/config.json

@@ -0,0 +1,8 @@
+{
+  "name": "nuc_animations",
+  "description": "Module that contains animation functions.",
+  "version": "0.3.1",
+  "category": "core",
+  "installed": true,
+  "enabled": true
+}

modules/nuc_animations/fade/_index.scss

@@ -0,0 +1,12 @@
+@import 'keyframes';
+
+%fade-in,
+.fade-in {
+  animation: fade-in 0.3s ease-in forwards;
+}
+
+%fade-out,
+.fade-out {
+  animation: fade-out 0.3s ease-in forwards;
+  opacity: 0;
+}

modules/nuc_animations/fade/_keyframes.scss

@@ -0,0 +1,19 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

modules/nuc_animations/hexagons/_index.scss

@@ -0,0 +1,32 @@
+.hexagon-rows-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+
+  .hexagon-row-container {
+    position: relative;
+    top: 30px;
+    margin-top: -13px;
+
+    .hexagon-container {
+      display: flex;
+      gap: 2px;
+
+      svg {
+        height: 48px;
+        overflow: visible;
+
+        polygon {
+          transition: all 500ms ease-in;
+        }
+      }
+
+      &.n2 {
+        margin-top: -13px;
+        margin-left: -20px;
+      }
+    }
+  }
+}

modules/nuc_animations/hexagons/index.ts

@@ -0,0 +1 @@
+export { NucAnimationHexagons } from './index.tsx'

modules/nuc_animations/hexagons/index.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import type { CSSProperties, JSX } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+
+import './_index.scss'
+
+import type { HexagonPatternsType } from './types'
+import { getHexagonPoints, updateImagesPerRow } from './utils'
+import { PATTERN_UPDATE_INTERVAL } from './variables'
+
+export function NucAnimationHexagons(): JSX.Element {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [hexagonRows, setHexagonRows] = useState<HexagonPatternsType>([])
+
+  useEffect(() => {
+    updateImagesPerRow(
+      containerRef.current,
+      () => undefined,
+      () => undefined,
+      setHexagonRows
+    )
+
+    const interval = setInterval(() => {
+      requestAnimationFrame(() => {
+        updateImagesPerRow(
+          containerRef.current,
+          () => undefined,
+          () => undefined,
+          setHexagonRows
+        )
+      })
+    }, PATTERN_UPDATE_INTERVAL)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      className="hexagon-rows-container"
+      style={{ width: '100%', minHeight: '70vh', overflow: 'hidden' }}
+    >
+      {hexagonRows.map((row, rowIndex) => (
+        <div
+          key={rowIndex}
+          className="hexagon-row-container"
+          style={{ display: 'flex' }}
+        >
+          {['hexagon-container n1', 'hexagon-container n2'].map(
+            (containerClass, containerIndex) => (
+              <div
+                key={containerIndex}
+                className={containerClass}
+                style={{ opacity: 0.15 + 0.015 * rowIndex, lineHeight: 0 }}
+              >
+                <svg width={row[containerIndex].length * 40} height="40">
+                  {row[containerIndex].map((opacity, imgIndex) => (
+                    <polygon
+                      key={imgIndex}
+                      className={`hexagon-${imgIndex}`}
+                      style={{ opacity } as CSSProperties}
+                      points={getHexagonPoints(20 + imgIndex * 40, 20, 20)}
+                      stroke="#10b981"
+                      strokeWidth={2}
+                    />
+                  ))}
+                </svg>
+              </div>
+            )
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

modules/nuc_animations/hexagons/types/index.ts

@@ -0,0 +1,2 @@
+export * from './interfaces'
+export * from './variables'

modules/nuc_animations/hexagons/types/interfaces.ts

@@ -0,0 +1,8 @@
+export interface HexagonConfigInterface {
+  width: number
+  height: number
+  containerWidth: number
+  containerHeight: number
+  imagesPerRow: number
+  totalRows: number
+}

modules/nuc_animations/hexagons/types/variables.ts

@@ -0,0 +1,2 @@
+export type HexagonRowType = number[][]
+export type HexagonPatternsType = number[][][]

modules/nuc_animations/hexagons/utils/calculate_dimensions.ts

@@ -0,0 +1,28 @@
+import type { HexagonConfigInterface } from '../types'
+import {
+  HEXAGON_HEIGHT,
+  HEXAGON_OVERLAP_FACTOR,
+  HEXAGON_WIDTH,
+  HEXAGON_WIDTH_FACTOR,
+} from '../variables'
+
+export function calculateDimensions(
+  containerWidth: number,
+  containerHeight: number
+): HexagonConfigInterface {
+  const calculatedImages: number = Math.ceil(
+    containerWidth / (HEXAGON_WIDTH / HEXAGON_WIDTH_FACTOR)
+  )
+  const calculatedRows: number = Math.ceil(
+    containerHeight / (HEXAGON_HEIGHT * HEXAGON_OVERLAP_FACTOR)
+  )
+
+  return {
+    width: HEXAGON_WIDTH,
+    height: HEXAGON_HEIGHT,
+    containerWidth,
+    containerHeight,
+    imagesPerRow: calculatedImages,
+    totalRows: calculatedRows,
+  }
+}

modules/nuc_animations/hexagons/utils/generate_row_pattern.ts

@@ -0,0 +1,22 @@
+import type { HexagonRowType } from '../types'
+
+export function generateRowPattern(
+  rowIndex: number,
+  totalImages: number,
+  totalRows: number
+): HexagonRowType {
+  const onesCount = Math.ceil((totalImages * (rowIndex + 1)) / (totalRows * 2))
+  const pattern = new Array(totalImages).fill(0)
+
+  let placedOnes = 0
+  while (placedOnes < onesCount) {
+    const randomIndex = Math.floor(Math.random() * totalImages)
+    if (pattern[randomIndex] === 0) {
+      pattern[randomIndex] = 1
+      placedOnes++
+    }
+  }
+
+  const half = Math.floor(totalImages / 2)
+  return [pattern.slice(0, half), pattern.slice(half)]
+}

modules/nuc_animations/hexagons/utils/get_hexagon_points.ts

@@ -0,0 +1,6 @@
+export function getHexagonPoints(cx: number, cy: number, r: number): string {
+  return Array.from({ length: 6 }, (_, i) => {
+    const angle = (Math.PI / 3) * i - Math.PI / 6
+    return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)].join(',')
+  }).join(' ')
+}

modules/nuc_animations/hexagons/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './calculate_dimensions'
+export * from './generate_row_pattern'
+export * from './get_hexagon_points'
+export * from './update_hexagon_patterns'
+export * from './update_images_per_row'

modules/nuc_animations/hexagons/utils/update_hexagon_patterns.ts

@@ -0,0 +1,13 @@
+import { generateRowPattern } from '.'
+import type { HexagonPatternsType } from '../types'
+
+export function updateHexagonPatterns(
+  totalRows: number,
+  imagesPerRow: number
+): HexagonPatternsType {
+  const patterns: HexagonPatternsType = []
+  for (let i = 0; i < totalRows; i++) {
+    patterns[i] = generateRowPattern(i, imagesPerRow, totalRows)
+  }
+  return patterns
+}

modules/nuc_animations/hexagons/utils/update_images_per_row.ts

@@ -0,0 +1,23 @@
+import { calculateDimensions, updateHexagonPatterns } from '.'
+import type { HexagonConfigInterface, HexagonPatternsType } from '../types'
+
+export const updateImagesPerRow = (
+  containerRef: HTMLElement | null,
+  setImagesPerRow: (value: number) => void,
+  setTotalRows: (value: number) => void,
+  setHexagonRows: (value: HexagonPatternsType) => void
+): void => {
+  if (!containerRef) return
+
+  const {
+    imagesPerRow: calculatedImages,
+    totalRows: calculatedRows,
+  }: HexagonConfigInterface = calculateDimensions(
+    containerRef.clientWidth,
+    containerRef.clientHeight
+  )
+
+  setImagesPerRow(calculatedImages)
+  setTotalRows(calculatedRows)
+  setHexagonRows(updateHexagonPatterns(calculatedRows, calculatedImages))
+}