diff --git a/TODO.md b/TODO.md
index cc71cfd..3047747 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,3 +1,2 @@
 - fix mouse, add button, drag
-- device orientation
 
diff --git a/demo/orientation.html b/demo/orientation.html
new file mode 100644
index 0000000..54f3055
--- /dev/null
+++ b/demo/orientation.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>&lt;repa-shader&gt; demo</title>
+  <script type="module" src="../src/repa-texture.js"></script>
+  <script type="module" src="../src/repa-shader.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background: repeating-linear-gradient(45deg, #333, #333 10px, #666 10px, #666 20px);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+    #fsinput {
+      width: 90vw;
+      height: 50vh;
+    }
+  </style>
+</head>
+<body>
+  <repa-shader id="demoshader" fs-input="fsinput" alpha orientation width=512 height=512>
+    <repa-texture src="avatar.png" name="tex_avatar" wrap="mirrored_repeat"></repa-texture>
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec3 col = .5 + .5 * cos(uv.xyx + time + vec3(0, 2, 4));
+  col *= texture(tex_avatar, uv).rgb;
+
+  float dist = distance(uv, .5 - orientation.zy / 180.);
+  float circle = smoothstep(.1, .2, dist) * .5 + .5;
+  vec4 acolor = vec4(col * circle, circle);
+  outColor = vec4(acolor);
+}
+  </repa-shader>
+  <div>
+    <textarea id="fsinput"></textarea>
+  </div>
+  <button id="update">Update</button>
+<script>
+const updateButton = document.getElementById('update');
+updateButton.addEventListener('click', () => {
+  const fsinput = document.getElementById('fsinput');
+  const shader = document.querySelector('repa-shader');
+  shader.render(fsinput.value);
+});
+</script>
+</body>
+</html>
diff --git a/src/repa-shader.js b/src/repa-shader.js
index 07e6b83..6c6244f 100644
--- a/src/repa-shader.js
+++ b/src/repa-shader.js
@@ -18,6 +18,7 @@ const CHUNKS = {
 precision highp float;
 uniform vec2 resolution;
 uniform vec3 mouse;
+uniform vec3 orientation;
 uniform float time;
 uniform float frame;
 `,
@@ -163,6 +164,10 @@ class RepaShader extends HTMLElement {
     this._gl.viewport(0, 0, width, height);
   }
 
+  _onOrientationEvent(e) {
+    this._orientation = [e.alpha, e.beta, e.gamma];
+  }
+
   _onMouseEvent(e) {
     const x = Math.min(Math.max(e.offsetX, 0), this._target.width);
     const y = Math.min(Math.max(e.offsetY, 0), this._target.height);
@@ -291,6 +296,10 @@ class RepaShader extends HTMLElement {
       // TODO touch ?
     }
 
+    if (this.hasAttribute('orientation')) {
+      window.addEventListener('deviceorientation', this._onOrientationEvent.bind(this));
+    }
+
     this.mode = this.getAttribute('mode') || this.mode;
 
     const program = this._gl.createProgram();
@@ -326,6 +335,7 @@ class RepaShader extends HTMLElement {
     this._uniLocation = {};
     this._uniLocation.resolution = this._gl.getUniformLocation(this.program, 'resolution');
     this._uniLocation.mouse = this._gl.getUniformLocation(this.program, 'mouse');
+    this._uniLocation.orientation = this._gl.getUniformLocation(this.program, 'orientation');
     this._uniLocation.time = this._gl.getUniformLocation(this.program, 'time');
     this._uniLocation.frame = this._gl.getUniformLocation(this.program, 'frame');
 
@@ -343,6 +353,7 @@ class RepaShader extends HTMLElement {
 
     this._attLocation = this._gl.getAttribLocation(this.program, 'position');
     this._mousePosition= [0, 0, 0];
+    this._orientation = [0, 0, 0];
     this._startTime = Date.now();
     this._frame = 0;
 
@@ -376,6 +387,7 @@ class RepaShader extends HTMLElement {
     this._gl.clear(this._gl.COLOR_BUFFER_BIT);
     this._gl.uniform2fv(this._uniLocation.resolution, [this._target.width, this._target.height]);
     this._gl.uniform3fv(this._uniLocation.mouse, this._mousePosition);
+    this._gl.uniform3fv(this._uniLocation.orientation, this._orientation);
     this._gl.uniform1f(this._uniLocation.time, this._nowTime * .001);
     this._gl.uniform1f(this._uniLocation.frame, this._frame);
 
