@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/recipes/imported/orb/Orb.jsx

@@ -0,0 +1,341 @@
+import { Mesh, Program, Renderer, Triangle, Vec3 } from 'ogl';
+import { useEffect, useRef } from 'react';
+import './Orb.css';
+
+export default function Orb({
+  hue = 0,
+  hoverIntensity = 0.2,
+  rotateOnHover = true,
+  forceHoverState = false,
+  backgroundColor = '#000000'
+}) {
+  const ctnDom = useRef(null);
+
+  const vert = /* glsl */ `
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `;
+
+  const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    uniform vec3 backgroundColor;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+
+      float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float innerFade = smoothstep(r0 * 0.8, r0 * 0.95, len);
+      v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 colBase = mix(color1, color2, cl);
+      float fadeAmount = mix(1.0, 0.1, bgLuminance);
+      
+      vec3 darkCol = mix(color3, colBase, v0);
+      darkCol = (darkCol + v1) * v2 * v3;
+      darkCol = clamp(darkCol, 0.0, 1.0);
+      
+      vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);
+      lightCol = mix(backgroundColor, lightCol, v0);
+      lightCol = clamp(lightCol, 0.0, 1.0);
+      
+      vec3 finalCol = mix(darkCol, lightCol, bgLuminance);
+      
+      return extractAlpha(finalCol);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+
+  useEffect(() => {
+    const container = ctnDom.current;
+    if (!container) return;
+
+    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    container.appendChild(gl.canvas);
+
+    const geometry = new Triangle(gl);
+    const program = new Program(gl, {
+      vertex: vert,
+      fragment: frag,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: {
+          value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
+        },
+        hue: { value: hue },
+        hover: { value: 0 },
+        rot: { value: 0 },
+        hoverIntensity: { value: hoverIntensity },
+        backgroundColor: { value: hexToVec3(backgroundColor) }
+      }
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+
+    function resize() {
+      if (!container) return;
+      const dpr = window.devicePixelRatio || 1;
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width * dpr, height * dpr);
+      gl.canvas.style.width = width + 'px';
+      gl.canvas.style.height = height + 'px';
+      program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    let targetHover = 0;
+    let lastTime = 0;
+    let currentRot = 0;
+    const rotationSpeed = 0.3;
+
+    const handleMouseMove = e => {
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const width = rect.width;
+      const height = rect.height;
+      const size = Math.min(width, height);
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const uvX = ((x - centerX) / size) * 2.0;
+      const uvY = ((y - centerY) / size) * 2.0;
+
+      if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+        targetHover = 1;
+      } else {
+        targetHover = 0;
+      }
+    };
+
+    const handleMouseLeave = () => {
+      targetHover = 0;
+    };
+
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+
+    let rafId;
+    const update = t => {
+      rafId = requestAnimationFrame(update);
+      const dt = (t - lastTime) * 0.001;
+      lastTime = t;
+      program.uniforms.iTime.value = t * 0.001;
+      program.uniforms.hue.value = hue;
+      program.uniforms.hoverIntensity.value = hoverIntensity;
+      program.uniforms.backgroundColor.value = hexToVec3(backgroundColor);
+
+      const effectiveHover = forceHoverState ? 1 : targetHover;
+      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+
+      if (rotateOnHover && effectiveHover > 0.5) {
+        currentRot += dt * rotationSpeed;
+      }
+      program.uniforms.rot.value = currentRot;
+
+      renderer.render({ scene: mesh });
+    };
+    rafId = requestAnimationFrame(update);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', resize);
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+      container.removeChild(gl.canvas);
+      gl.getExtension('WEBGL_lose_context')?.loseContext();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
+
+  return <div ref={ctnDom} className="orb-container" />;
+}
+
+function hslToRgb(h, s, l) {
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  return new Vec3(r, g, b);
+}
+
+function hexToVec3(color) {
+  if (color.startsWith('#')) {
+    const r = parseInt(color.slice(1, 3), 16) / 255;
+    const g = parseInt(color.slice(3, 5), 16) / 255;
+    const b = parseInt(color.slice(5, 7), 16) / 255;
+    return new Vec3(r, g, b);
+  }
+
+  const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgbMatch) {
+    return new Vec3(parseInt(rgbMatch[1]) / 255, parseInt(rgbMatch[2]) / 255, parseInt(rgbMatch[3]) / 255);
+  }
+
+  const hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);
+  if (hslMatch) {
+    const h = parseInt(hslMatch[1]) / 360;
+    const s = parseInt(hslMatch[2]) / 100;
+    const l = parseInt(hslMatch[3]) / 100;
+    return hslToRgb(h, s, l);
+  }
+
+  return new Vec3(0, 0, 0);
+}

package/dist/assets/upstream/recipes/imported/orbit-images/OrbitImages.css

@@ -0,0 +1,52 @@
+.orbit-container {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.orbit-scaling-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.orbit-scaling-container--responsive {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: center center;
+}
+
+.orbit-rotation-wrapper {
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+  position: relative;
+}
+
+.orbit-path-svg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.orbit-item {
+  position: absolute;
+  will-change: transform;
+  user-select: none;
+}
+
+.orbit-center-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.orbit-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/dist/assets/upstream/recipes/imported/orbit-images/OrbitImages.jsx

@@ -0,0 +1,255 @@
+// Component created by Dominik Koch
+// https://x.com/dominikkoch
+
+import { useMemo, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { motion, useMotionValue, useTransform, animate } from 'motion/react';
+import './OrbitImages.css';
+
+function generateEllipsePath(cx, cy, rx, ry) {
+  return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`;
+}
+
+function generateCirclePath(cx, cy, r) {
+  return generateEllipsePath(cx, cy, r, r);
+}
+
+function generateSquarePath(cx, cy, size) {
+  const h = size / 2;
+  return `M ${cx - h} ${cy - h} L ${cx + h} ${cy - h} L ${cx + h} ${cy + h} L ${cx - h} ${cy + h} Z`;
+}
+
+function generateRectanglePath(cx, cy, w, h) {
+  const hw = w / 2;
+  const hh = h / 2;
+  return `M ${cx - hw} ${cy - hh} L ${cx + hw} ${cy - hh} L ${cx + hw} ${cy + hh} L ${cx - hw} ${cy + hh} Z`;
+}
+
+function generateTrianglePath(cx, cy, size) {
+  const height = (size * Math.sqrt(3)) / 2;
+  const hs = size / 2;
+  return `M ${cx} ${cy - height / 1.5} L ${cx + hs} ${cy + height / 3} L ${cx - hs} ${cy + height / 3} Z`;
+}
+
+function generateStarPath(cx, cy, outerR, innerR, points) {
+  const step = Math.PI / points;
+  let path = '';
+  for (let i = 0; i < 2 * points; i++) {
+    const r = i % 2 === 0 ? outerR : innerR;
+    const angle = i * step - Math.PI / 2;
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+    path += i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
+  }
+  return path + ' Z';
+}
+
+function generateHeartPath(cx, cy, size) {
+  const s = size / 30;
+  return `M ${cx} ${cy + 12 * s} C ${cx - 20 * s} ${cy - 5 * s}, ${cx - 12 * s} ${cy - 18 * s}, ${cx} ${cy - 8 * s} C ${cx + 12 * s} ${cy - 18 * s}, ${cx + 20 * s} ${cy - 5 * s}, ${cx} ${cy + 12 * s}`;
+}
+
+function generateInfinityPath(cx, cy, w, h) {
+  const hw = w / 2;
+  const hh = h / 2;
+  return `M ${cx} ${cy} C ${cx + hw * 0.5} ${cy - hh}, ${cx + hw} ${cy - hh}, ${cx + hw} ${cy} C ${cx + hw} ${cy + hh}, ${cx + hw * 0.5} ${cy + hh}, ${cx} ${cy} C ${cx - hw * 0.5} ${cy + hh}, ${cx - hw} ${cy + hh}, ${cx - hw} ${cy} C ${cx - hw} ${cy - hh}, ${cx - hw * 0.5} ${cy - hh}, ${cx} ${cy}`;
+}
+
+function generateWavePath(cx, cy, w, amplitude, waves) {
+  const pts = [];
+  const segs = waves * 20;
+  const hw = w / 2;
+  for (let i = 0; i <= segs; i++) {
+    const x = cx - hw + (w * i) / segs;
+    const y = cy + Math.sin((i / segs) * waves * 2 * Math.PI) * amplitude;
+    pts.push(i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`);
+  }
+  for (let i = segs; i >= 0; i--) {
+    const x = cx - hw + (w * i) / segs;
+    const y = cy - Math.sin((i / segs) * waves * 2 * Math.PI) * amplitude;
+    pts.push(`L ${x} ${y}`);
+  }
+  return pts.join(' ') + ' Z';
+}
+
+function OrbitItem({ item, index, totalItems, path, itemSize, rotation, progress, fill }) {
+  const itemOffset = fill ? (index / totalItems) * 100 : 0;
+
+  const offsetDistance = useTransform(progress, (p) => {
+    const offset = (((p + itemOffset) % 100) + 100) % 100;
+    return `${offset}%`;
+  });
+
+  return (
+    <motion.div
+      className="orbit-item"
+      style={{
+        width: itemSize,
+        height: itemSize,
+        offsetPath: `path("${path}")`,
+        offsetRotate: '0deg',
+        offsetAnchor: 'center center',
+        offsetDistance,
+      }}
+    >
+      <div style={{ transform: `rotate(${-rotation}deg)` }}>{item}</div>
+    </motion.div>
+  );
+}
+
+export default function OrbitImages({
+  images = [],
+  altPrefix = 'Orbiting image',
+  shape = 'ellipse',
+  customPath,
+  baseWidth = 1400,
+  radiusX = 700,
+  radiusY = 170,
+  radius = 300,
+  starPoints = 5,
+  starInnerRatio = 0.5,
+  rotation = -8,
+  duration = 40,
+  itemSize = 64,
+  direction = 'normal',
+  fill = true,
+  width = 100,
+  height = 100,
+  className = '',
+  showPath = false,
+  pathColor = 'rgba(0,0,0,0.1)',
+  pathWidth = 2,
+  easing = 'linear',
+  paused = false,
+  centerContent,
+  responsive = false,
+}) {
+  const containerRef = useRef(null);
+  const [scale, setScale] = useState(null);
+
+  const designCenterX = baseWidth / 2;
+  const designCenterY = baseWidth / 2;
+
+  const path = useMemo(() => {
+    switch (shape) {
+      case 'circle':
+        return generateCirclePath(designCenterX, designCenterY, radius);
+      case 'ellipse':
+        return generateEllipsePath(designCenterX, designCenterY, radiusX, radiusY);
+      case 'square':
+        return generateSquarePath(designCenterX, designCenterY, radius * 2);
+      case 'rectangle':
+        return generateRectanglePath(designCenterX, designCenterY, radiusX * 2, radiusY * 2);
+      case 'triangle':
+        return generateTrianglePath(designCenterX, designCenterY, radius * 2);
+      case 'star':
+        return generateStarPath(designCenterX, designCenterY, radius, radius * starInnerRatio, starPoints);
+      case 'heart':
+        return generateHeartPath(designCenterX, designCenterY, radius * 2);
+      case 'infinity':
+        return generateInfinityPath(designCenterX, designCenterY, radiusX * 2, radiusY * 2);
+      case 'wave':
+        return generateWavePath(designCenterX, designCenterY, radiusX * 2, radiusY, 3);
+      case 'custom':
+        return customPath || generateCirclePath(designCenterX, designCenterY, radius);
+      default:
+        return generateEllipsePath(designCenterX, designCenterY, radiusX, radiusY);
+    }
+  }, [shape, customPath, designCenterX, designCenterY, radiusX, radiusY, radius, starPoints, starInnerRatio]);
+
+  useLayoutEffect(() => {
+    if (!responsive || !containerRef.current) return;
+    const updateScale = () => {
+      if (!containerRef.current) return;
+      setScale(containerRef.current.clientWidth / baseWidth);
+    };
+    updateScale();
+    const observer = new ResizeObserver(updateScale);
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [responsive, baseWidth]);
+
+  const progress = useMotionValue(0);
+
+  useEffect(() => {
+    if (paused) return;
+    const controls = animate(progress, direction === 'reverse' ? -100 : 100, {
+      duration,
+      ease: easing,
+      repeat: Infinity,
+      repeatType: 'loop',
+    });
+    return () => controls.stop();
+  }, [progress, duration, easing, direction, paused]);
+
+  const containerWidth = responsive ? '100%' : (typeof width === 'number' ? width : '100%');
+  const containerHeight = responsive ? 'auto' : (typeof height === 'number' ? height : (typeof width === 'number' ? width : 'auto'));
+
+  const items = images.map((src, index) => (
+    <img
+      key={src}
+      src={src}
+      alt={`${altPrefix} ${index + 1}`}
+      draggable={false}
+      className="orbit-image"
+    />
+  ));
+
+  return (
+    <div
+      ref={containerRef}
+      className={`orbit-container ${className}`}
+      style={{
+        width: containerWidth,
+        height: containerHeight,
+        aspectRatio: responsive ? '1 / 1' : undefined,
+      }}
+      aria-hidden="true"
+    >
+      <div
+        className={responsive ? 'orbit-scaling-container orbit-scaling-container--responsive' : 'orbit-scaling-container'}
+        style={{
+          width: responsive ? baseWidth : '100%',
+          height: responsive ? baseWidth : '100%',
+          transform: responsive && scale !== null ? `translate(-50%, -50%) scale(${scale})` : undefined,
+          visibility: responsive && scale === null ? 'hidden' : undefined,
+        }}
+      >
+        <div
+          className="orbit-rotation-wrapper"
+          style={{ transform: `rotate(${rotation}deg)` }}
+        >
+          {showPath && (
+            <svg
+              width="100%"
+              height="100%"
+              viewBox={`0 0 ${baseWidth} ${baseWidth}`}
+              className="orbit-path-svg"
+            >
+              <path d={path} fill="none" stroke={pathColor} strokeWidth={pathWidth / (scale ?? 1)} />
+            </svg>
+          )}
+
+          {items.map((item, index) => (
+            <OrbitItem
+              key={index}
+              item={item}
+              index={index}
+              totalItems={items.length}
+              path={path}
+              itemSize={itemSize}
+              rotation={rotation}
+              progress={progress}
+              fill={fill}
+            />
+          ))}
+        </div>
+      </div>
+
+      {centerContent && (
+        <div className="orbit-center-content">
+          {centerContent}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/assets/upstream/recipes/imported/particles/Particles.css

@@ -0,0 +1,5 @@
+.particles-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}